Menu
I'm developing a react-app with webpack4. It seems to work fine until I updated react from 16.6 to 16.8. After the update, the app is built and compiled successfully but it doesn´t load in the browser (the is no error message shown).
I'm executing npm start in development mode (script webpack-dev-server --mode development) with webpack4 configuration sown below.
webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html',
});
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
publicPath: '/',
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
],
},
devServer: {
historyApiFallback: true,
},
plugins: [htmlPlugin],
};
index.js
window.React = React;
ReactDOM.render(
<MuiThemeProvider theme={baseTheme}>
<Provider store={store}>
<App/>
</Provider>
</MuiThemeProvider>,
document.getElementById('index')
);
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>besolidary!</title>
</head>
<body>
<div id="index"></div>
</body>
</html>
Actually, no error message is shown neither in the browser or in the npm terminal.
359
asked Mar 18 '26 06:03
I found the solution. The problem was the version of npm. For React 16.8 or higher in necessary npm 6.x (I was using npm 3.x). Thanks for your help!
86
answered Mar 20 '26 09:03
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With