dynamic import naming doesn’t work

Do you want to request a feature or report a bug?
bug

What is the current behavior?
I used comment to define chunkname as follows:

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

But in build report there is no chunk name specified and still generate filename as 1.[hash].js

If the current behavior is a bug, please provide the steps to reproduce.
https://github.com/MarvinXu/webpack-chunkname-test

npm install
npm run build

Author: Fantashit

13 thoughts on “dynamic import naming doesn’t work

  1. 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 vuejs-templates/webpack#730

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

  3. 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

  4. 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 🙂

  5. 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.

  6. 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

  7. 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 🙂

  8. @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.

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

Comments are closed.