webpack config for dynamic import-CodePudding

I want to implement lazy import. I have webpack.config.prod.js file. I know i have to make some changes in it for using dynamic import. So, I do it and the project gives build. But can runt npm run start:server. It says:

Support for the experimental syntax 'dynamicImport' isn't currently enabled (20:45):

  18 | import { seoDataMap, idDataMap, LocDataMap, dataMap } from './data'
  19 | 
> 20 | const GoogleMapComponent = React.lazy(() => import('../../components/DynamicLandingPages/GoogleMapComponent.js'))

I do config like that:

oneOf: [
...
...
 {
            test: /\.(js|mjs|jsx|ts|tsx)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              customize: require.resolve(
                'babel-preset-react-app/webpack-overrides'
              ),
              plugins: [
                [
                  require.resolve('babel-plugin-named-asset-import'),
                  {
                    loaderMap: {
                      svg: {
                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
                      },
                    },
                  },
                ],
                "@babel/plugin-syntax-dynamic-import",
              ],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
              // Don't waste time on Gzipping the cache
              cacheCompression: true,
              compact: true,
            },
          },
...
...
]

My question is that what is wrong with config??

CodePudding user response：

I would suggest to read documents.