Uso TerserWebpackPlugin para comprimir archivos JavaScript en modo de producción. Y funcionó a menos que agregué división de código. Los complementos comienzan a arrojar un error Invalid syntax: 96dd6cce9d985b84ae6a [main.js:75348,105] .

Y ese es el contenido de la línea 75348:

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

No parece ser incorrecto.

Versiones de paquetes

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

Código:

 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> )

Configuración del paquete web de optimización:

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

¿Qué está mal?

EDITAR 1:

alias:

 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'], },