MiniCssExtractPlugin tries and crashes on CSS injection in Web Workers

[paztis]

Bug report

Actual Behavior

In Web Worker, when we try to import files that are also used into main frame , MiniCss frequently tries to inject CSS stylesheets
As document is not available inside Web Worker, it crashes (no existence check)

Uncaught (in promise) ReferenceError: document is not defined
    at findStylesheet (src_workers_index_worker_ts.js:455:36)
    at src_workers_index_worker_ts.js:472:17
    at new Promise (<anonymous>)
    at loadStylesheet (src_workers_index_worker_ts.js:469:20)
    at __webpack_require__.f.miniCss (src_workers_index_worker_ts.js:485:58)
    at src_workers_index_worker_ts.js:95:40
    at Array.reduce (<anonymous>)
    at __webpack_require__.e (src_workers_index_worker_ts.js:94:67)

Expected Behavior

Document existence must be checked before injection test.

How Do We Reproduce?

Create a simple webworker as specified in https://webpack.js.org/guides/web-workers/
Try to import file taht contains CSS to check the crash

Please paste the results of npx webpack-cli info here, and mention other relevant information

[paztis]

Or we may need a way to totally disable MiniCss over some top level files (worker files)

[alexander-akait]

Yeah, it is a bug/limitation, just for imformation - why do you import CSS in web workers?

[paztis]

In fact I import a constant from a 3rd part graphic module.
I only need the constant.

But when you do

Import {constant} from 'xxxxx'

Webpack process the full module (in dev mode) without tree shaking) and automatically the css of the module is caught.

This is perhaps another issue, but at least the NPE of document might be treat

[alexander-akait]

Got it, let's to do nothing in CSS runtime when no document, it should be easy to fix, do you want to send a PR?

[paztis]

I will not have time for this sorry 😔

[alexander-akait]

Don't worry, just a question, I will put it in my TODO list

[alexander-akait]

@paztis Hello, can you provide webpack version? I tried to reproduce on the latest version and got no window.document found, will not HMR CSS, so I think it is already fixed on HMR webpack side (if no can you provide small reproducible test repo?)

[alexander-akait]

Because maybe you have script in worker which uses document, in this case you need to solve it on the application side

[paztis]

No. This code is explicitly yours.
FindStylesheet is minicss function.

I use latest webpack version + webpack federation

[alexander-akait]

Yeah, but HMR has document guard, that is why I ask about the example of the problem (just the small example to see why it happens)

[alexander-akait]

Reproduced, looks like you have it in import(...)

[alexander-akait]

Please try https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v2.7.2