Terser plugin Unexpected token: operator (<)

Question

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

Answer 1

I just had the same issue, changing the extension filename on these files to .jsx solved this issue.