@emotion/cache browser specific module breaks SSR

• emotion version: 10.0.7
• react version: 16.8.0

Relevant code: https://github.com/emotion-js/emotion/blob/master/packages/cache/src/index.js#L69

What you did: Tried to SSR using static-site-generator-webpack-plugin.

What happened:

ERROR in ReferenceError: document is not defined at createCache
(webpack:////node_modules/@emotion/cache/dist/cache.browser.esm.js?:109:38)

Problem description: When @emotion/cache gets imported by webpack with target: web it fails due to the browser specific module not including the check for typeof document !== 'undefined'. As mentioned in https://github.com/emotion-js/emotion/issues/1113 this is a known issue and setting target: node is not an adequate solution.

Suggested solution: Drop the browser specific version of the module.

[johot]

Thank you for this thread!

This was actually a big problem for us! We wanted to use Emotion 10 together with ReactJS.NET for using React components inside Razor pages in ASP.NET. The problem here is we can’t use target “node” because the V8 engine it is running can’t understand it (no support for require etc). So we need to use target: "web" but still enable SSR.

By manually deleting all the browser: settings from each emotion package.json like @rdadoune suggested we got it working!

So there are definately cases where a check should be made even if it is the browser specific module.

Follow up findings:

I could also make it work without the monkey patch by setting (in webpack.config.js):

 resolve: {
      aliasFields: ["module"]
},

[Andarist]

As mentioned in #1113 this is a known issue and setting target: node is not an adequate solution.

Isnt it? Could you prepare a simple repository reproducing the issue with your setup? I could take a look then.