Emotion: Emotion 10 - "React is not defined"

[JustinTRoss]

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

...

[JustinTRoss]

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';

[nathanshelly]

Having the same issue, is this something that can potentially be fixed? Or is @JustinTRoss' thought that it may be an issue above emotion correct?

[bitttttten]

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.

[JustinTRoss]

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

[bitttttten]

Yes @JustinTRoss

[bitttttten]

Does this example break for you? I am getting random failures again. Steps that I follow that can almost reliably break it:

• Open the codesandbox link
• Open index.tsx, edit I am an example? to Hello, I am an example? Here it might break
• If not, open ComponentTwo.tsx and edit text from This is a test to This is a real test Here it might break
• Go back to into index.tsx and edit the text again to something different. If you made it this far without breaking, this should finish it off. I haven't been able to get past this step.

Showing two examples in screenshots of what happens.

[JustinTRoss]

@bitttttten It threw the error for me as well after updating the text a couple times. I'll attach that sandbox to top of thread. I'm wondering if this exists outside of CRA or Typescript users.

[nathanshelly]

@bitttttten above example breaks on the last step (modifying index.tsx the second time) for me (link to my erroring sandbox).

[Dudeonyx]

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

[damusnet]

Also running into this, with a slightly different setup:

• emotion version: "@emotion/core": "10.0.10"
• react version: "react": "16.8.6"

but also:

• "@emotion/babel-preset-css-prop": "10.0.9"
• "next": "8.0.4" (so, not create-react-app)
• "jest": "24.7.1"

and more importantly:

• "@storybook/react": "5.0.8"

The reason I mention storybook is because everything was working fine, in Next.js, with Jest also, with no-pragma thanks to babel-preset-css-prop.

But then I added storybook and ran into babel-preset-css-prop does not work with Storybook #1306, for which the fix is to add the /** @jsx jsx */ pragma.

Doing this led me to remove the import React from 'react'; from my component file, and that's when I ran into jsx is not defined.

Using the trick from @JustinTRoss and do import { jsx, css } from '@emotion/core'; fixes it, but I'm a little sad we're back to using the pragma and explicitly importing jsx when previously it wasn't necessary.

[bitttttten]

Is this a babel issue or an emotion one? Has anybody worked with a different jsx pragma (like preact) and run into the same issue?

[bogdansoare]

same issue

[lesreaper]

We're not using typescript, or CSR, and running into the issue.

[peduarte]

Same issue here 🤔

Works in a CodeSandbox but not in my project.

[peduarte]

Also: Shouldn't the CSS prop work out of the box if I import @emotion/css/macro ?

[jackric]

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

[bitttttten]

That's my current solution too @jackric .

But then it makes me feel like it's a babel issue, rather than an emotion one? The tricky part is that when I had files that failed without the jsx pragma, they failed randomly. On our CI server, it would always be a different file.. even though locally none of the files failed.

[renchap]

Are you using react-hot-loader? This looks similar to https://github.com/gaearon/react-hot-loader/issues/1196

[JustinTRoss]

@renchap I'm having trouble seeing the relation. Would you mind pointing it out for me?

[renchap]

When you use react-hot-loader and Emotion 10, you have the same kind of issue : the react import seems to be tree-shaked in a sub-component, leading to the "react is not defined error".
I hit this a few months ago when trying to upgrade to Emotion 10 (and did not manage to solve it).
See https://github.com/emotion-js/emotion/issues/1046#issuecomment-461390721 for what I wrote at the time.
After seeing the react-hot-loader issue, I quickly tried to disable react-hot-reload in my emotion 10 branch, and it seemed to work. I did not investigate further, but this seems related.

I did not wanted to spend more time troubleshooting this as I was a bit time-constrained at the time, but I would be very happy to help fixing this, so I can finally upgrade 😄

[jackric]

I am using react-hot-loader. Don't really want to stop using it...

[bitttttten]

My build was breaking on the CI server, where react-hot-loader was not ran. It was failing whilst running jest. So either there are 2 bugs, one for let's say jest and one for react-hot-loader, or 1 that is tool agnostic.

[karannagupta]

I'm using CRA + Typescript. I wrapped every component inside a to get rid of the error.

[Andarist]

There was a bug in babel - https://github.com/babel/babel/pull/9798 . I believe the original bug reported here was about that very bug affecting the build.

The discussion here seems to be off track right now, so I'm going to close it. If you still have problems please open new issues.

[JustinTRoss]

Thanks for the heads-up. That looks promising. It seems the next move for most folks is to wait for Create React App to update their babel version from 7.4.3 to 7.4.4 and then update their repo from whatever major version of CRA they are on to whatever 3.x.x version has the update.

Also, the discussion is only off track if the cited babel commit resolves the issue. 😛Otherwise, the discussion seems like relevant data on the issue.

[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.