Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dynamic import naming doesn't work #4861

Closed
MarvinXu opened this issue May 11, 2017 · 38 comments
Closed

dynamic import naming doesn't work #4861

MarvinXu opened this issue May 11, 2017 · 38 comments

Comments

@MarvinXu
Copy link

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
@stevewillard
Copy link

Try with an '='

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

@MarvinXu
Copy link
Author

Try with an '='

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

doesn't work.

@maelon
Copy link

maelon commented May 15, 2017

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

@MarvinXu
Copy link
Author

To be clear, I use the latest webpack(2.5.1) in my project. The require.ensure method works fine with the chunkname, it's just comment definition in import() doesn't work. I don't know where went wrong.

I added require.ensure test in my project:
https://github.com/MarvinXu/webpack-chunkname-test

@ematipico
Copy link
Contributor

I use this feature (2.5.1) and it works fine to me. The only difference is that I don't have the '@' inside the path of my dynamic module; instead I have a relative path.

@MarvinXu
Copy link
Author

@ematipico '@' is an alias for 'src', I've tested it is not relevant to this.

@maelon
Copy link

maelon commented May 15, 2017

I also set an alias for path, so it fails here?

@a573367014
Copy link

I have the same problem

@quantizor
Copy link
Contributor

quantizor commented May 24, 2017

It works for me without the @ - might be something with your setup. (I'm on OS X, for reference.)

@silen-z
Copy link

silen-z commented May 26, 2017

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

@MarvinXu
Copy link
Author

MarvinXu commented Jun 1, 2017

It works for me without the @ - might be something with your setup. (I'm on OS X, for reference.)

@probablyup
Did you test on my project? I removed alias '@' just now. Can you test it for me once more?

@6220119
Copy link

6220119 commented Jun 9, 2017

This is not related to Webpack as @MarvinXu is using vue-cli with webpack template to generate the project. This issue should be closed

@devinRex
Copy link

Same problem. Does someone find the solution?

@lihaoqi1991
Copy link

I also have this problem, does someone resolve this issue?

@ematipico
Copy link
Contributor

The problems were related to bad configuration inside the project. At the moment I am heavily using this feature and I don't have issues. What your problem? Care to share some code of how you use the import()?

@MarvinXu
Copy link
Author

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

@axe312ger
Copy link

Same issue. Was suspecting babel but even with my .babelrc with comments: true it won't work :(

@axe312ger
Copy link

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

@milewski
Copy link

milewski commented Jan 4, 2018

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

@devinRex
Copy link

devinRex commented Jan 5, 2018

Set the comment in .babelrc to false.comments: false
require.ensure([], (require) => resolve(require('@/views/ensureChunk.vue')), networkError, 'ensureChunk');

import(/* webpackChunkName: "import-chunk" */ '../views/importChunk.vue')

@devpascoe
Copy link

A combo of comments: true in .babelrc and webpack config to include chunkFilename = '[name].js' did the trick.

@toverux
Copy link

toverux commented Jan 29, 2018

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

@mikeaustin
Copy link

mikeaustin commented Feb 5, 2018

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.

@milewski
Copy link

milewski commented Feb 5, 2018

@mikeaustin you know what.. one of my latest project which was working before out of suddenly started to output 0. 1. bundler names too! it might be a bug with latest version of webpack.. try downgrading it a bit see if that works for you

@shlomiassaf
Copy link

shlomiassaf commented Feb 13, 2018

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

@shlomiassaf
Copy link

This is weird because ImportPlugin does the same thing for System.import and import-call so I'm confused...

For now i'm just using System.import, which will be easy to port once I move to Webpack 4, I hope it's fixed there.

@js2me
Copy link

js2me commented Feb 17, 2018

It's very odd so, on typescript and webpack with module esnext dynamic import is worked, and on just JavaScript and webpack dynamic import is not worked , with babel-plugin-dynamic-import too

@js2me
Copy link

js2me commented Feb 17, 2018

@shlomiassaf r u using Typescript when you write

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

@BlackGlory
Copy link

System.import and import are different.

In my TypeScript+Webpack case, { "module": "commonjs" } caused the problem. It worked fine on "es5" and "esnext".

@Armour
Copy link

Armour commented Aug 20, 2018

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

@jhernandez5922
Copy link

In case anyone else runs into this issue. I was using new webpack.optimize.UglifyJsPlugin and in that config I had output: { comments: 0 } and by changing it to 1 fixed it.

@qiaoqiaowang
Copy link

qiaoqiaowang commented Jan 10, 2019

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

I set comments:false, my comments in code is removed, but non-entry module's webpackChunkName is not affected.
webpack: 3.8.1
babel-core: 6.26.3

@amaroyche
Copy link

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

@ericbiewener
Copy link

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

@adjenks
Copy link

adjenks commented May 3, 2019

Can you make it just dynamically import a file just purely based on the text string and let the user do the chunking themselves instead of having webpack mangle the names for you? That's what I'd really like to do.

@rphl
Copy link

rphl commented Jun 6, 2019

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

@FreezeSoul
Copy link

mark !!!!

@mzahidriaz
Copy link

I am also facing trouble with just import instead System.import is working for dynamic imports.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests