"document is undefined" in WebWorker when importing styles from css module

[w1ndy]

https://github.com/vuejs/vue-style-loader/blob/af61a420077118fb03ba6e27098d2d90722cfc0f/lib/addStylesClient.js#L116

document could be undefined if a style file is required from a WebWorker.

[yyx990803]

Are you running a webpack bundle inside a web worker? Can you be more specific about your use case?

[w1ndy]

@yyx990803 See here for a bug repro. In the browser, the webworker fails to run, and addStylesClient.js throws Uncaught ReferenceError: document is not defined.

[yyx990803]

I know it has problems in workers, what I'm trying to understand is why you are using it inside a worker, since the worker has no access to the DOM. Are you trying to render Vue components in a worker?

[w1ndy]

Just like what I’ve demonstrated in the repro, the worker just reads some exported constants from a CSS module. In my real use case, I define several constants that control the style (like color, width and height of views, etc) and share them using CSS modules between Vue components and workers, which generate geometry data asynchronously for canvas drawing. The trouble is that I cannot access these constants within workers because vue-style-loader relies on document to do some preprocessing.

[destroytoday]

I’m experiencing this now when bundling a component package with config.css.extract = false and importing it into a Nuxt app. Since there’s a condition for SSR anyway, could we simply check for document like var styleElement = document && document.querySelector(...

[rplotkin]

--- wrong commit, sorry ----