I use TerserWebpackPlugin to compress JavaScript files in production mode. And it did work unless I added code splitting. The plugins starts to throw an error Invalid syntax: 96dd6cce9d985b84ae6a [main.js:75348,105].

And that's is content of 75348 line:

/******/                var href = "resources/" + chunkId + "." + __webpack_require__.h ? __webpack_require__.h() : fa5d2a76a3dcf571c28b + ".css";

Doesn't look to be incorrect.

Packages versions

"react": "^17.0.2",
"react-dom": "^17.0.2",
"terser-webpack-plugin": "^5.2.4",

Code:

const Page1 = React.lazy(() => import('@view/page1/Page1'));
const Page2 = React.lazy(() => import('@view/page2/Page2'));

// ...

return (
  <React.Suspense fallback={<LoadingPage/>}>
    {viewModel.activePage === Pages.Page1 && <Page1/>}
    {viewModel.activePage === Pages.Page2 && <Page2/>}
  </React.Suspense>
)

Webpack config of optimisation:

optimization: {
  minimize: isProd,
  minimizer: [
    new CssMinimizerPlugin(),
    new TerserPlugin({
      test: /.js$/i,
      extractComments: false,
      terserOptions: {
        output: { comments: false },
      },
    }),
  ]
},

What is wrong?

EDIT 1:

aliases:

resolve: {
  alias: {
    // need for react_core
    ...aliases,
    '@domain': path.resolve(__dirname, 'src/domain'),
    '@service': path.resolve(__dirname, 'src/service'),
    '@utils': path.resolve(__dirname, 'src/utils'),
    '@view': path.resolve(__dirname, 'src/view'),
    '@sass': path.resolve(__dirname, 'src/sass'),
    '@components': path.resolve(__dirname, 'src/components'),
    '@resources': path.resolve(__dirname, 'resources'),
  },
  extensions: ['.tsx', '.ts', '.js'],
},