Using a React component using Emotion from an NPM Module breaks Gatsby SSR

[openscript]

Sorry for double posting, but I'm a bit desperate about this: gatsbyjs/gatsby#35698

As described in the post, I'm trying to use an React component inside a Gatsby project. This React component uses Emotion. Somehow the components doesn't see the Cache context and throws:

  1168 |   var className = "";
  1169 |   if (typeof props.className === "string") {
> 1170 |     className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
       | ^
  1171 |   } else if (props.className != null) {
  1172 |     className = props.className + " ";
  1173 |   }


  WebpackError: TypeError: Cannot read properties of null (reading 'registered')

Any idea what I'm doing wrong? Thank you in advance!

[Andarist]

Most likely you have multiple copies of Emotion there

[openscript]

Thank you for your response. I've experimented with externalizing the @emotion/react, but unfortunately this didn't help. Do I need to externalize the dependencies of @emotion/react as well?

[openscript]

I've externalized:

      external: [
        'react',
        'react-dom',
        '@emotion/cache',
        '@emotion/hash',
        '@emotion/is-prop-valid',
        '@emotion/memoize',
        '@emotion/react',
        '@emotion/serialize',
        '@emotion/styled',
        '@emotion/styled/base',
        '@emotion/unitless',
        '@emotion/utils',
      ],

.. but I still have the line mentioned above, which is causing the problem in my output.

[openscript]

This also looked promising https://github.com/audal/gatsby-plugin-emotion-ssg but it leads to the same error. How can I initialize this missing cache?

  202 |   var className = "";
  203 |   if (typeof props.className === "string") {
> 204 |     className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
      |                                    ^
  205 |   } else if (props.className != null) {
  206 |     className = props.className + " ";
  207 |   }


  WebpackError: TypeError: Cannot read properties of null (reading 'registered') (from plugin: gatsby-plugin-emotion-ssg)

[Andarist]

I've seen such issues dozens of times - and each time it was related to running multiple versions of Emotion in an app. So that's kinda the advice I can give based on the provided information - look for Emotion copies and try to eliminate them.

I could help you if you would provide a minimal repro of the problem but without that my options are limited unless you'd like to contract me to fix this for you in your proprietary project.

[openscript]

There were multiple instances of Emotion which caused the error:
openscript-ch/react-section-dividers#60