Dynamic imports generates wrong Chunks with folder structure `Comment/index.js` and `import './Comment'`

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

What is the current behavior?

When using

import(/* webpackChunkName: 'asyncComponents/[request]' */ `./asyncComponents/${name}`)

with this folder structure:

.
└── asyncComponents
    └── Comment
        ├── index.js
        └── styles.css

You would expect the imported chunk name to be asyncComponents/Comment-index or ideally simply asyncComponents/Comment. Instead it’s asyncComponents/Post-.

styles.css for example gets a chunk named: asyncComponents/Page-styles

If the current behavior is a bug, please provide the steps to reproduce.

Use

import(/* webpackChunkName: 'asyncComponents/[request]' */ `./asyncComponents/${name}`)

with the above folder structure and check out the chunk names

What is the expected behavior? Generate same chunk names (Button) as with static compiling

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System. node 8.2.1 webpack 3.5.4 macOS 10.12.6

[sokra]

Thanks for your report. It would be great if you reduce your issue to a small reproducible example. Best put this example into a github repository together with instructions how to get to the problem.

[ermik]

There are some new issues with this. I had react-universal-component + webpack-flush-chunks + babel-plugin-universal-import working fine until webpack started spitting out chunks with slashes in the file names for where the path went, while the universal component expects hyphens.