webpack: dynamic import for chunk in node_modules is not working as expected

Bug report

What is the current behavior? When Project B imports Project A from node_modules, and Project A uses dynamic import/lazy loading to load some part of itself as required, the resolution fails on Project B (webpack in Project B can’t find the chunk file at the expected place).

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

  • Create a webpack project. - Project A
  • Add dynamic imports in Project A to get some chunks dynamically.
  • Observe that the chunks are created in the output folder (build) and lazy loading works fine when running this project.

Project B

  • Create a webpack project - Project B
  • include Project A as a dependency.
  • in some file in Project B, import the main module from Project A (which would lazy load other parts of Project A as required)
  • The lazy loaded chunks as specified in Project A , do not get resolved now.

This seems to happen because once Project A main chunk has been created in Project B (because of the import), all the relative paths inside the main file in Project A are now resolved relative to Project B. So previously the chunk that was resolved from “Project A/build” is now trying to get resolved from “Project B/build” But Project B does not have the chunks required by Project A in its build folder (they are only in the build folder of Project A), so the call fails.

What is the expected behavior? The expected behaviour is to get the chunk resolution working. I can partly understand why it is not working, because it is trying to resolve those urls relative to the current Project B, but Project B does not have those chunk files in the build directory (although the files are available in Project B/node_modules/Project A/build)

Currently I can make it work by copying Project A/build/* to Project B/build/* , which lets webpack find the required chunks at the current url.

Would it make sense for webpack to copy the dynamically imported chunks from Project A to Project B, if during import it encounters an import from Project A, and that import further dynamically imports other modules. If i am not wrong, this is how it works for static imports.

Other relevant information: webpack version:
Node.js version: Operating System: Additional tools:

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 5
  • Comments: 15 (5 by maintainers)

Most upvoted comments

you should use source files for project A, otherwise you getting problem with public path…