title: lazy loading in react Uncaught SyntaxError: Unexpected token <
body: <p>I'm trying to implement lazy loading and chunk splitting in my react app. up to now everything has been working fine and really haven't had any issues google couldn't resolve but this is doing my head in. please find below my babel and webpack config set up.</p>
  
  <p>.babelrc</p>
  
  <pre><code>{
    "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-member-expression-literals",
    "@babel/plugin-transform-property-literals",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-regenerator"
   ],
   "presets": [
   [
    "@babel/preset-env",
     {
       "useBuiltIns": "usage"
     }
    ],
    "@babel/preset-react"
   ],
   "env": {
    "karma": {
     "plugins": [
      [
        "istanbul",
        {
          "exclude": [
            "tests/*.test.js"
          ]
        }
       ]
     ]
    }
   }
  }
  </code></pre>
  
  <p>weback.config.js</p>
  
  <pre><code>`
   const developmentConfig = merge([
      {
        output: {
        chunkFilename: '[name].[chunkhash:4].js',
        filename: '[name].[chunkhash:4].js',
        path: PATHS.build,
      },
      optimization: {
        splitChunks: {
          cacheGroups: {
            commons: {
             test: NodeRegex,
             name: 'vendor',
             chunks: 'initial',
             minChunks: 2,
           },
         },
       },
      },
    },
    parts.loadCSS(),
    parts.loadImages(),
    parts.generateSourceMaps({ type: 'cheap-module-eval-source-map' }),
    parts.clean(PATHS.build), // deletes old dist folder
  ]);`
  
   module.exports = (mode) =&gt; {
    if (mode === 'production') {
     return merge(commonConfig, productionConfig, { mode });
    }
    return merge(commonConfig, developmentConfig, { mode });
   };
  </code></pre>