Emotion 10 - "React is not defined"

• emotion version: "@emotion/core": "^10.0.10"
• react version: "react": "^16.8.6"
• typescript version: "typescript": "^3.4.1"
• react-scripts version: "react-scripts": "2.1.8"

Relevant code:

// AppContainer.tsx

/** @jsx jsx */
const AppContainer: React.SFC = () => (
  <ApolloProvider client={apolloClient}>
    <Global styles={() => css(normalize)} />

    <App />
  </ApolloProvider>
);

// App.tsx

const App: React.SFC = () => (
  <div className="App">
    <Header />
  </div>
);

// Header.tsx

/** @jsx jsx */
const Header: React.SFC = () => (
  <header css={headerCss}> ... </header>
);

What you did:

Started my application (react-scripts start)

What happened: “React is not defined” error.

Reproduction:

Many people are reporting this issue as responses to other existing issues, so I’m opening a thread here. I don’t have time to put together a code sandbox for it at the moment, but the error seems to occur when you have components which match the following criteria:

• component uses the @emotion/core css function
• component uses jsx pragma
• component has children which meet the criteria:
  • child component doesn’t use jsx pragma
  • child component has children which use the jsx pragma

@bitten put together a code sandbox here: https://codesandbox.io/s/l7zzpkmmlm . If you change the text a couple times in index and/or ComponentTwo, it should reproduce consistently.

Problem description:

When using jsx pragma, sometimes the user gets a “React is not defined” error.

Other folks have done some debugging and found that webpack may actually treeshaking out React in these cases. This may indicate it’s an issue beyond emotion and that create-react-app may just not be compatible with this version. I cannot confirm.

Suggested solution:

…

[justingrant]

FYI for other folks arriving here from Google, I also ran into this error when using <> which is the shorthand syntax for <React.Fragment>. The <> syntax is currently not compatible with emotion 10’s css prop. To work around the problem, use <React.Fragment> instead of <>.

For more details, see https://github.com/yannickcr/eslint-plugin-react/issues/2156 and https://github.com/emotion-js/emotion/issues/1549.

[JustinTRoss]

@nathanshelly @bitttttten Are you both using CRA, Typescript, and Emotion?