webpack: Dynamic import() error, wrong file path on nested routes
Bug report
What is the current behavior?
Dynamic import import() doesn’t work on nested routes: the file path of lazy loaded file is not begin parsed correctly.
If the current behavior is a bug, please provide the steps to reproduce. Here is a simple test repository test-webpack-dynamic-import, please read the README.md file.
What is the expected behavior?
import() file path should not be relative but absolute path, or webpack should automatically rewrite the file path if the file is called from a location different from the root folder.
Other relevant information: webpack version: 4.9.1 Node.js version: 8.11.1
Reference to original issue #6483.
EDIT: How to solve this problem: See my repository learn-webpack/dynamic-import and learn-webpack/publicpath
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 9
- Comments: 19 (8 by maintainers)
Thanks @sokra, your solution works. Would be nice to add some resolving logic to webpack runtime, let it rewrite every urls as relative path that point to the correct asset, without the need of
publicPath. Maybe the label for this issue should be changed from “bug” to “feature request”.I’m having a similar issue and have tried adjusting the
publicPathto no avail.I’m building a component library that uses code splitting, where Webpack outputs a main bundle and any chunks. I am then loading this library in my main application, however at runtime the application cannot resolve the dynamic chunks from the component library and I get this:
produced by this line:
<script charset="utf-8" src="/1.b57b3648a17b2bbe2f3c.js"></script>Main component library bundle is here:
/node_modules/pwa/dist/bundle.jsAnd the chunk:/node_modules/pwa/dist/1.22903e1b8e0b58875f97.jsDoes Webpack support code splitting within third-party dependencies?
Set
output.publicPath: "/"(or"/dist/"depending on your server root) and run this from a server (not via file:// protocol).