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.

Answer 1

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