profile
viewpoint

Ask questionsEmotion 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.

image

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:

...

emotion-js/emotion

Answer questions 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.

useful!

Related questions

Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 2
Component selectors not working with `@emotion/babel-preset-css-prop` hot 2
How to use babel-emotion-plugin with Storybook + Typescript? hot 1
Snapshot tests showing components as '<ForwardRef />' instead of component name hot 1
Using emotion 9 and 10 in the same window hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Problems surrounding SSR injection of <style> and unreliability of :first-child selectors hot 1
Typescript definitions for @emotion/native hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
&:focus not working hot 1
regexp not work in IE hot 1
transpile typescript to babel-plugin-emotion doesn't work hot 1
Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Github User Rank List