TypeError: Cannot read property 'key' of undefined on server side render

• emotion version: @emotion/core: 10.0.6
• react version: 16.4.2

Relevant code:

const Carousel = () => {
  return <div css={{
    backgroundColor: 'hotpink',
    '&:hover': {
      color: 'lightgreen'
    }
  }}>Hello</div>;
};

What you did:

Seems to be failing for server side render (see error in What happened) Works on client render.

I tried to migrate from emotion 9 to 10. I have moved over the component code to use @emotion/core and used the import:

/** @jsx jsx */
import { css, jsx } from '@emotion/core';

I have also removed all the server side render code associated with emotion 9 (eg: renderStylesToString)

Maybe im missing something?

What happened:

Got this error on server side render (client render is ok):

TypeError: Cannot read property 'key' of undefined
    at insertStyles (webpack-internal:///./node_modules/@emotion/utils/dist/utils.esm.js:17:25)
    at render (webpack-internal:///./node_modules/@emotion/core/dist/core.esm.js:122:82)
    at eval (webpack-internal:///./node_modules/@emotion/core/dist/core.esm.js:163:10)
    at Object.eval [as children] (webpack-internal:///./node_modules/@emotion/core/dist/core.esm.js:83:18)
    at ReactDOMServerRenderer.render (webpack-internal:///../fe-build/node_modules/react-dom/cjs/react-dom-server.node.development.js:3290:55)
    at ReactDOMServerRenderer.read (webpack-internal:///../fe-build/node_modules/react-dom/cjs/react-dom-server.node.development.js:3057:29)
    at renderToString (webpack-internal:///../fe-build/node_modules/react-dom/cjs/react-dom-server.node.development.js:3524:27)
    at Object.eval [as serverRender] (webpack-internal:///../fe-build/lib/fe-server/demo/server.js:37:89)
    at render (/Users/martin.jujou/Documents/projects/fe-build/lib/server.js:76:62)
    at Layer.handle [as handle_request] (/Users/martin.jujou/Documents/projects/fe-build/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/martin.jujou/Documents/projects/fe-build/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/martin.jujou/Documents/projects/fe-build/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/martin.jujou/Documents/projects/fe-build/node_modules/express/lib/router/layer.js:95:5)
    at /Users/martin.jujou/Documents/projects/fe-build/node_modules/express/lib/router/index.js:281:22
    at param (/Users/martin.jujou/Documents/projects/fe-build/node_modules/express/lib/router/index.js:354:14)
    at param (/Users/martin.jujou/Documents/projects/fe-build/node_modules/express/lib/router/index.js:365:14)

Reproduction:

Not sure if this is associated with our internal webpack tooling Hard to reproduce on a code sandbox link with our internal tooling

Problem description:

See above.

Suggested solution:

? Not sure

[winstondispatch]

I also ran into this error while running mocha tests, so I needed to make emotion think I was running on a browser by adding global.HTMLElement = window.HTMLElement; to my jsdom setup.

[jmrossy]

Same problem for me when running tests via Jasmine + JSDOM but the suggestion from @winstondispatch above solved it!