emotion: 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:

…

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 19
Comments: 27 (1 by maintainers)

Most upvoted comments

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.

+19

justingrant on Nov 18, 2019

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

JustinTRoss on Apr 8, 2019

For those interested in a short-term workaround, you can just add jsx pragma to the components in between, which don’t use the css function.

For instance, in the App.jsx example above, I would add the following:

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

JustinTRoss on Apr 3, 2019

same issue. I’m needing to add the jsx pragma to lots of files that don’t even use css prop 😒

jackric on May 31, 2019

I had this issue a few weeks ago and I eventually fixed it by deleting my node_modules folder and yarn-lock file, then copying the yarn-lock file from another fresh CRA project to my project then running yarn install.

Note: merely deleting node_modules and yarn-lock and running yarn install did fuck all, It was absolutely necessary to copy another yarn-lock.

For the life of me I couldn’t figure out the cause of the issue and once it started it persisted even when I removed all emotion styles from my project so at the time I thought the culprit might not have been emotion.

A workaround I used till I fixed was setting React in the global window object

// index.tsx
import React from 'react';

window.React = React;

// stuff

Dudeonyx on Apr 12, 2019

I also had this with my jest tests. Although they would fail randomly. Adding the pragma comment to the top of every file that used ensured it didn’t fail any longer, although still a bit strange that this bug appeared so randomly.

bitttttten on Apr 8, 2019