Unable to use import() with magic comments

[amatiash]

import(/* webpackChunkName: "plugin" */ './plugin.js') sets chunk [name] the same as [id], so the output filename is 0.0.js (in config: chunkFilename: '[id].[name].js')

[ljharb]

This might be a duplicate of #25

[melloc01]

Same for me, I'm receiving the chunkId even with chunkFilename: [name].js and with webpackChunkName on magic comments.

[melloc01]

const setEditorUi = function () {
    const WidgetsService = require('live/services/widgets')

    import(/* webpackChunkName: "editor" */ './ui/default').then(m => WidgetsService.editor('default', m))
    import(/* webpackChunkName: "editor" */ './ui/html').then(m => WidgetsService.editor('html', m))
}

Gets transformed into:

var setEditorUi = function setEditorUi() {
    var WidgetsService = __webpack_require__(/*! live/services/widgets */ "./js/live-core/services/widgets.js");

    new Promise(function (resolve) {
        __webpack_require__.e(/*! require.ensure */ 1).then((function (require) {
            resolve(__webpack_require__( /* webpackChunkName: "editor" *//*! ./ui/default */ "./js/modules/widget/ui/default/index.js"));
        }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
    }).then(function (m) {
        return WidgetsService.editor('default', m);
    });
    new Promise(function (resolve) {
        Promise.all(/*! require.ensure */[__webpack_require__.e("vendor"), __webpack_require__.e(2)]).then((function (require) {
            resolve(__webpack_require__( /* webpackChunkName: "editor" *//*! ./ui/html */ "./js/modules/widget/ui/html/index.js"));
        }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
    }).then(function (m) {
        return WidgetsService.editor('html', m);
    });
};

[Armour]

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

[cbdyzj]

For TypeScript user, make sure tsconfig.json:

...
"module": "esnext",
"moduleResolution": "node",
...

[jose-bernard-receeve]

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

Thank you!! it was the module": "esnext" for me