@wordpress/scripts: loading async chunks using import fails when they import styles and webpackChunkName is used (FixStyleWebpackPlugin?)

[tw-360vier]

Description

When building my project with @wordpress/scripts i encounter the following problem:
loading async chunks using import() fails when they import styles and webpackChunkName is used to give the chunk a proper name.

Step-by-step reproduction instructions

Here i have created a minimal project to reproduce the issue: https://github.com/tw-360vier/wp-scripts-FixStyleWebpackPlugin-chunk-load-error

Expected behaviour

I expect the chunk to be loaded without error.

Actual behaviour

i encounter the following error:

index.js:1 Uncaught (in promise) ChunkLoadError: Loading chunk 2 failed.
(error: http://127.0.0.1:8080/style-my-chunk.js)
    at Function.u.e (http://127.0.0.1:8080/index.js:1:1662)
    at Object.<anonymous> (http://127.0.0.1:8080/index.js:1:3148)
    at u (http://127.0.0.1:8080/index.js:1:369)
    at http://127.0.0.1:8080/index.js:1:3106
    at http://127.0.0.1:8080/index.js:1:3115
u.e @ index.js:1
(anonymous) @ index.js:1
u @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:1
Promise.then (async)
(anonymous) @ index.js:1
u @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:1

Removing "FixStyleWebpackPlugin" from the webpack config fixes the issue, so it seems like it is related to that.

[gziolo]

It's one of the issues that might get resolved when we upgrade to webpack 5. FixStyleWebpackPlugin is only necessary for webpack 4 and while it addresses some other concerns it might cause other issues.

[gziolo]

We are in the process of upgrading webpack to the next major version v5 in #33818. FixStyleWebpackPlugin plugin is going to be removed so it should resolve this issue.