I have been trying to make a webpack config for a react based app, it was working before I started using webpack-merge and had the single webpack.config.js file. I have done a lot of reading and I have not been able to find a solution and was wondering if there is a way for me to have a split webpack config.
Any help would be much appreciated!
The error I am getting is:
ERROR in ./src/index.js 8:4
Module parse failed: Unexpected token (8:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| ReactDOM.render(
> <App title={title} />,
| document.getElementById('app')
| );
webpack 5.19.0 compiled with 1 error in 17 ms
i ｢wdm｣: Failed to compile.
My webpack config files:
webpack.common.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, '..', './src/index.js'),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['@babel-loader'],
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
output: {
path: path.resolve(__dirname, '..', './dist'),
filename: 'bundle.js',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', './src/index.html')
}),
],
devServer: {
contentBase: path.resolve(__dirname, '..', './dist'),
hot: true,
},
};
webpack.config.js
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
module.exports = ({ env }) => {
const envConfig = require(`./webpack.${env}.js`);
return merge(commonConfig, envConfig);
};
webpack.dev.js
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
};
webpack.prod.js
module.exports = {
mode: 'production',
devtool: 'source-map',
};
My other files:
App.js
import React from "react";
const App = ({ title }) =>
<div>{title}</div>;
export default App;
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello World!</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<div id='app'></div>
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "../App";
ReactDOM.render(
<App title={title} />,
document.getElementById('app')
);
module.hot.accept();
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
package.json
...
"scripts": {
"start": "webpack serve --config build-utils/webpack.dev.js --env env=dev",
"build": "webpack --config build-utils/webpack.prod.js --env env=prod",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"babel-cli": "^6.26.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.5.1",
"react-hot-loader": "^4.13.0",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}