Search code examples
reactjswebpackwebpack-2

Dynamically imported module doesn't generate separate chunk

I import a module via dynamic imports:

import(
    /* webpackChunkName: "comp-abc" */
    /* webpackMode: "lazy" */
    './comp-abc.jsx'
)

But after building via webpack, there isn't a separate chunk generated for comp-abc.jsx that's loaded. Instead, it's just included in the main bundle. Do I need to add an additional plugin or loader?

Repo containing webpack configs + working issue: https://github.com/catc/code-splitting-poc

Solution

  • It seems the issue was using babel-plugin-dynamic-import-node using instead of the correct babel-plugin-dynamic-import.

    See https://github.com/webpack/webpack/issues/5703#issuecomment-330964922 for original github issue.