Emotion.js with create-react-app: ReferenceError: jsx is not defined

Question

I am trying to use emotion.js with create-react-app and TypeScript. Following the documentation I added @emotion/core, used import {jsx, css} from '@emotion/core'; and added /** @jsx jsx */ at the top of my file.

But when I am running the app, the following error gets thrown:

ReferenceError: jsx is not defined

This is my example component:

/** @jsx jsx */

import {jsx, css} from '@emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";

export const Header: React.FunctionComponent<{}> = () => (
  <div css={{
    backgroundColor: 'hotpink',
    '&:hover': {
      color: 'lightgreen'
    }
  }}>
    <NavigationBar/>
    Test
  </div>
);

The line, the error gets thrown at is the definition of the function: export const Header: React.FunctionComponent<{}> = () => (

Any help how to get this to work (other than ejecting create-react-app scripts) would be much appreciated.

This seems to be a known issue github.com/emotion-js/emotion/issues/1112 — Christian Scott
– Christian Scott, Commented Jan 2, 2019 at 13:04

Johannes Klauß · Accepted Answer · 2019-02-14 16:50:39Z

7

UPDATE: Emotion should work right out of the box now according to this comment on github.

The solution is to put a jsx; statement somewhere in the file, like so:

/** @jsx jsx */

import {jsx, css} from '@emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";

jsx;

export const Header: React.FunctionComponent<{}> = () => (
  <div css={{
    backgroundColor: 'hotpink',
    '&:hover': {
      color: 'lightgreen'
    }
  }}>
    <NavigationBar/>
    Test
  </div>
);

edited Feb 14, 2019 at 16:50

answered Jan 6, 2019 at 15:15

Johannes Klauß

11.1k18 gold badges73 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thilak Rao Over a year ago

Not the cleanest solution, but this is exactly what I have been doing as well. Related: github.com/babel/babel/pull/9095

Emmanuel Powell-Clark · Accepted Answer · 2020-12-21 14:42:52Z

1

To add to Johannes Klauß's answer, you don't need to reference jsx;

You just need the pragma statement (top-line and import):

/** @jsx jsx */
import { jsx } from "theme-ui"

Example:

/** @jsx jsx */
import {jsx, css} from '@emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";


export const Header: React.FunctionComponent<{}> = () => (
  <div css={{
    backgroundColor: 'hotpink',
    '&:hover': {
      color: 'lightgreen'
    }
  }}>
    <NavigationBar/>
    Test
  </div>
);

you may need to add:

/** @jsxRuntime classic */

as well if using theme-ui and next.JS

answered Dec 21, 2020 at 14:42

Emmanuel Powell-Clark

111 bronze badge

Collectives™ on Stack Overflow

Emotion.js with create-react-app: ReferenceError: jsx is not defined

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related