webpack: dynamic import naming doesn't work

This problem is caused by babel configuration comment: false in my project, babel removes the “magic comments” before it takes effect. Check .babelrc to see if you have similar configuration, set comment to true or simply remove it and it should work.

More details please see https://github.com/vuejs-templates/webpack/issues/730

If you are using TypeScript, please also ensure that you don’t have this option in your tsconfig.json:

{
  "compilerOptions": {
    "removeComments": true
  }
}

Let the removal of the comments to another plugin/loader, like UglifyJS. This option is only useful if you’re not using a complex build tool, which is obviously not the case if you’re reading this issue 😃

I’ve encountered this and it turned out I had to set output.chunkFilename in my webpack config

To sum up, make sure you set:

• comments: true in .babalrc (this is the default)
• chunkFilename: '[name].....' in your webpack config

If you are using typescript, also make sure:

• removeComments: false under compilerOptions in tsconfig.json
• module: esnext in tsconfig.json

This works for me and here is my commit for adding dynamic import (code split) support to my react-typescript project, hope it helps 😃

Try with an ‘=’

import(/* webpackChunkName="chunk1" */'@/components/chunk1.js')

in my case i was using typescript so 1 it was removed the comments, 2 it was transforming the import to a promise … setting module:esnext in the tsconfig.json worked for me

Following @milewski,

This works, bundle is split

System.import(/* webpackChunkName: "OverviewComponent" */ './__tdm-code__.ts');

This does not, one bundle to all imports.

import(/* webpackChunkName: "OverviewComponent" */ './__tdm-code__.ts');

The issue seems’ to be in import() only

I’ve inspected the code emited, first System.import

__webpack_require__.e/* import() */(5).then(__webpack_require__.bind(null, \"./src/demo/modules/@forms/tutorials/1a-overview/__tdm-code__.ts\"));\n    }\n 

now import()

Promise.resolve().then(function () { return __webpack_require__(/* webpackChunkName: \"OverviewComponent\" */ \"./src/demo/modules/@forms/tutorials/1a-overview/__tdm-code__.ts\"); });

Clearly, import()s implementation is completely different.

System.import is just sugar for require.ensure while import() is just doing static require behind a microtask.

I’ve also tried to explicitly set webpackMode: "lazy", maybe it wasn’t the default, still no luck. Looks like it’s always webpackMode: "eager"

Is it a template thing in webpack configuration? or this is just how it should work?

Seems odd

@Armour’s last comment worked for me, but note that [you may need to also add `“moduleResolution”: “node”](https://github.com/Microsoft/TypeScript/issues/16820#issuecomment-312033871) to preserve the module resolution approach that `“module”: “commonjs”` provides.

Still not working with import(). Works only with System.import() for me. But its deprecated?!? 😕

(chunkFilename is set)

System.import(/* webpackChunkName="chunk1" '../components/chunk1.js')

FYI make sure you are not importing desired chunk “directly” somewhere else in code.

Update: I was using babel-plugin-dynamic-import-webpack instead of babel-plugin-dynamic-import. Similar tools, but they work at different levels.

=====

I’m also having issues with webpackChunkName with a simple test project. I have chunkFilename and don’t strip comments. It always generates a 0.bundle.js

module.exports = {
  entry: './src/index.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js'
  },
  ...
}

I feel so close! I’m simply separating the login page from the rest of the app.

Okay gotcha: I set output.filename to include [name] but forgot to configure output.chunkFilename to contain [name] 💡

Same problem. I had to use webpack 1. The old api require.ensure works perfectly in webpack 1.

mark !!!