configuration on webpack.config.js for babel dynamic import

Question

I want to use dynamic import in ReactJS. I add this line of code to my config but it doesnt work. What might be the reason? It gives build with npm run build but says:

Compiled successfully.

File sizes after gzip:

  568.04 KB  build/static/js/2.462ff6f6.chunk.js
  387.13 KB  build/static/js/main.ec5adb7d.chunk.js
  41.72 KB   build/static/css/2.2a6730c1.chunk.css
  3.46 KB    build/static/css/main.78d7887d.chunk.css
  1.66 KB    build/static/js/3.c903ea40.chunk.js
  1.16 KB    build/static/js/runtime~main.0ea0b8e7.js

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

And when I try to run it with command:

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

And:

pos: 1194,
  loc: Position { line: 20, column: 44 },
  missingPlugin: [ 'dynamicImport' ],
  code: 'BABEL_PARSE_ERROR'

And here is my config:

{
            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",
              ],
              cacheDirectory: true,
              // Save disk space when time isn't as important
              cacheCompression: true,
              compact: true,
            },
          },

So, what might be the problem??

monim · Answer

1- install plugin-syntax-dynamic-import : npm install @babel/plugin-syntax-dynamic-import

2- create a .babelrc file : and add this to it :

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

zan5959 · Answer

For people who have same issue, I tried to create .babelrc file then did npm run build. It said there were 2 config files. Then I got that in my case, babel config lives in package.json file. The error pointed package.json. Then I did this in my package.json and it solved everything:

"babel": {
    "presets": [
      "@babel/env",
      "@babel/react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      [
        "babel-plugin-styled-components",
        {
          "displayName": true
        }
      ],
      "@babel/plugin-syntax-dynamic-import"
    ]
  },

configuration on webpack.config.js for babel dynamic import

2 Answers