webpack: Inside require.ensure, using require with chained property causes dependencies to be added to wrong chunk

Bug report

EDIT: originally thought this happened with TypeScript dependency but that’s not the case, so updating description.

What is the current behavior?

When using require.ensure along with a specified chunkName to require code where a chained property reference is used (see below), the dependency module will not get added to the specified chunk, but instead to the chunk of the caller. This massively breaks lazy loading behaviour in our code base.

An example of what is meant by “chained property reference” can be seen here. Anything where there is a chained reference/call immediately after the require would cause this issue.

require.ensure([], () => {
    const ModuleB = require("./ModuleB").ModuleB;
}, "chunk2");

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

Please see the Github repo here for a repro case build with both Webpack 3 (the expected behaviour) and Webpack 5 (the unexpected behaviour): https://github.com/scameron/webpack-issue.

What is the expected behavior?

All code for the require.ensure should be added to the specified chunk, regardless of its origin.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 15 (15 by maintainers)

Most upvoted comments

Good find @scameron

fix is here: #14725