question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:15 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
sokracommented, Nov 13, 2021

Good find @scameron

1reaction
sokracommented, Nov 13, 2021

fix is here: #14725

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to split code in Webpack with require.ensure for ...
Then, the chunks are separated and if one depends on a specific vendor dependency, it will be added to this specific chunk rather...
Read more >
A Guide to Managing Webpack Dependencies - Toptal
For this purpose, we can use require.ensure or System.import functions, which Webpack can detect statically. Webpack can generate a separate bundle based on ......
Read more >
Module | webpack - JS.ORG
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >
Configuring a Step - Spring
Spring Batch uses a “chunk-oriented” processing style in its most ... Despite the relatively short list of required dependencies for a Step ...
Read more >
Concurrent function in Power Apps - Microsoft Learn
Normally, multiple formulas are evaluated by chaining them together with the ; (semi-colon) operator, which evaluates each formula sequentially.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found