Webpack5: Don't import a second file while a first one is in flight

[tmeasday]

Issue: Lazy compilation can fail if CSF files are imported very quickly, either by navigating or via preloading (#17964)

webpack/webpack#15541

What I did

Introduce a "pipeline" into import() when Lazy Compilation is active. The pipeline will stop us from running import() a second time while a first import() is in flight.

How to test

Turn on lazy compilation in the react-ts example:

  core: {
    channelOptions: { allowFunction: false, maxDepth: 10 },
    disableTelemetry: true,
    builder: {
      name: '@storybook/builder-webpack5',
      options: {
        lazyCompilation: true,
      },
    },
  },

NOTE

@yannbf this will not help with the test runner bug as it simply "debounces" things on the client side, but in the case of the TR, there are multiple clients, so that cannot happen. A true fix is (maybe?) to do a similar pipelining in on the lazy compilation backend in webpack.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit ca1a7a5. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=8 --max-parallel=15 -- --reset --optimized

---

Sent with 💌 from NxCloud.

[codecov]

Codecov Report

Merging #18432 (bdd6f61) into next (7a48cd5) will decrease coverage by 0.00%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##             next   #18432      +/-   ##
==========================================
- Coverage   32.01%   32.00%   -0.01%     
==========================================
  Files         975      975              
  Lines       19234    19239       +5     
  Branches     4033     4036       +3     
==========================================
  Hits         6158     6158              
- Misses      12513    12518       +5     
  Partials      563      563              

Impacted Files	Coverage Δ
...lder-webpack5/src/preview/iframe-webpack.config.ts	0.00% <0.00%> (ø)
lib/core-common/src/utils/to-importFn.ts	41.66% <0.00%> (-20.84%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7a48cd5...bdd6f61. Read the comment docs.

[codecov-commenter]

Codecov Report

Merging #18432 (1f02c5c) into future/base (a1c81d1) will decrease coverage by 0.00%.
The diff coverage is 0.00%.

@@               Coverage Diff               @@
##           future/base   #18432      +/-   ##
===============================================
- Coverage        30.74%   30.73%   -0.01%     
===============================================
  Files              798      798              
  Lines            17086    17091       +5     
  Branches          3528     3531       +3     
===============================================
  Hits              5253     5253              
- Misses           11408    11413       +5     
  Partials           425      425              

Impacted Files	Coverage Δ
...lder-webpack5/src/preview/iframe-webpack.config.ts	0.00% <0.00%> (ø)
lib/core-common/src/utils/to-importFn.ts	41.66% <0.00%> (-20.84%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a1c81d1...1f02c5c. Read the comment docs.

[shilman]

CI build step is failing