Importing emotion crashes with"document is not defined" when imported into a WebWorker script

[mzabsky]

Current behavior:
When I import emotion into a WebWorker script, it fails with following error:

worker.ab30da2c.js:116 Uncaught ReferenceError: document is not defined
    at createCache (cache.browser.esm.js:105)
    at createEmotion (create-emotion.browser.esm.js:23)
    at Object.parcelRequire.../node_modules/emotion/dist/emotion.esm.js.create-emotion (emotion.esm.js:3)
    at newRequire (worker.ab30da2c.js:47)
    at localRequire (worker.ab30da2c.js:53)
    at Object.parcelRequire.worker.js.emotion (worker.js:1)
    at newRequire (worker.ab30da2c.js:47)
    at worker.ab30da2c.js:81
    at worker.ab30da2c.js:120

Admittedly, importing emotion into a WebWorker is probably a code smell on its own, in my case, it is caused by an elaborate chain of imports that would be rather painful to disentangle. Either way, it should work.

To reproduce:
I have prepared a repo reproducing this issue. yarn install, yarn start, then open the page. You should see the error in the console.

Triage:
The cause seems pretty clear. In this section of cache/src/index.js:

  let container: HTMLElement
  if (isBrowser) {
    container = options.container || document.head

    const nodes = document.querySelectorAll(`style[data-emotion-${key}]`)

the condition gets optimized away as true in the final cache.browser.esm.js, ignoring the fact that it should be false when called from WebWorker:

  var container;

  {
    container = options.container || document.head;
    var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");

When I hard-coded the value of isBrowser to false, the entire block using document gets optimized away and the issue no longer occurs (either in my project or the reproduction linked above). I haven't found any work-arounds which wouldn't require changes to emotion code.
I haven't done any further investigation as I am not at all familiar with the build process emotion is using.

Environment information:

• react version: 16.8.6
• emotion version: occurs in both master (2ca4d26) and published latest (10.0.14)
• Built with Parcel bundler 1.12.3

[Andarist]

Parcel shouldn't load that file (cache.browser.esm.js) when bundling for webworker - it should load cache.esm.js. In webpack you can configure a target - https://webpack.js.org/configuration/target/ . Not sure if this can be configured in Parcel. If not then I would report that issue to Parcel team.

[mzabsky]

I don't think this can be configured, Parcel does all this stuff automagically. I will try to report this to Parcel too.

[Andarist]

Closing this as the issue got filed against Parcel and it really seems that this should be handled on the bundler level.