I get this error message when i run cross-env NODE_ENV=production webpack --config
There is a problem with the terser pluggin, but didn't find anything about this, that could solve my problem.
There is my config/webpack.prod.js :
ERROR in src/index.js
src/index.js from Terser plugin
Unexpected token: operator (<) [src/index.js:11,25]
at js_error (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:546:11)
at croak (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:1270:9)
at token_error (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:1278:9)
at unexpected (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:1284:9)
at expr_atom (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:2523:9)
at maybe_unary (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:3308:19)
at expr_ops (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:3359:24)
at maybe_conditional (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:3364:20)
at maybe_assign (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:3441:20)
at expression (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:3466:24)
ERROR in src/components/App/index.js
src/components/App/index.js from Terser plugin
Unexpected token: operator (<) [src/components/App/index.js:9,2]
at js_error (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:546:11)
at croak (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:1270:9)
at token_error (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:1278:9)
at unexpected (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:1284:9)
at expr_atom (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:2523:9)
at maybe_unary (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:3308:19)
at expr_ops (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:3359:24)
at maybe_conditional (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:3364:20)
at maybe_assign (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:3441:20)
at expression (/Users/isidore/Desktop/oclock/spe-react/Spe-React-E03-prise-en-main-modele-lsidore/node_modules/terser/dist/bundle.min.js:3466:24)
2023-02-08 19:29:31: webpack 5.73.0 compiled with 2 errors in 1626 ms (edb1238b11f4b1df800c)
error Command failed with exit code 1.
There is my webpack.prod.js :
const paths = require('./paths');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { BundleStatsWebpackPlugin } = require('bundle-stats-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
devtool: false,
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
// Stats bundle
new BundleStatsWebpackPlugin(),
],
module: {
rules: [
{
test: /\.(s?css)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: '../' },
},
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 3,
url: {
filter: (url) => {
if (url.includes('charset=utf-8;;')) {
return false;
}
return true;
},
},
},
},
'postcss-loader',
'resolve-url-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true,
implementation: require('sass'),
},
},
],
},
],
},
stats: {
assets: true,
entrypoints: true,
chunks: true,
modules: true,
builtAt: true,
hash: true,
},
optimization: {
minimizer: [new TerserJSPlugin(), new CssMinimizerPlugin()],
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
},
},
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000,
},
});
There is my .babel.src :
{
"presets": [
[
"@babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3
}],
["@babel/preset-react", {
"runtime": "automatic"
}]
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread"
]
}
There is my src/index.js :
// == Import : npm
import { createRoot } from 'react-dom/client';
// == Import : local
// Composants
import App from 'src/components/App';
// == Render
// 1. Élément React racine (celui qui contient l'ensemble de l'app)
// => crée une structure d'objets imbriqués (DOM virtuel)
const rootReactElement = <App />;
// 2. La cible du DOM (là où la structure doit prendre vie dans le DOM)
const root = createRoot(document.getElementById('root'));
// 3. Déclenchement du rendu de React (virtuel) => DOM (page web)
root.render(rootReactElement);
There is my src/components/App/index.js :
// == Import
import reactLogo from './react-logo.svg';
import './styles.css';
// == Composant
const App = () => {
return (
<div className="app">
<img src={ reactLogo } alt="react logo" />
<h1>Composant : App</h1>
</div>
);
};
// == Export
export default App;
i've tried to delete new TerserJSPlugin()
, and it works but the code is not minified.
i've tried to change .babelrc preset to :
"presets": [
"@babel/react",
"@babel/env"
]
didn't do anything
I just had the same issue, changing the extension filename on these files to .jsx
solved this issue.