Emotion: Unable to use v10 with create-react-app

[eddeee888]

• emotion version: 10.0.5
• react version: 16.5.2
• react-scripts: 2.1.1

Relevant code:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

/** @jsx jsx */
import { jsx, css } from "@emotion/core";

const style = css`
  color: hotpink;
`;

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div css={style}>PINK</div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

What you did:
I was testing how jsx pragma would work with create-react-app and typescript. As soon as I change index.js to index.tsx, it complains that jsx is not defined.

What happened:

Reproduction:

Codepen: https://codesandbox.io/s/mj7x3qjvqp

Problem
I'm using the latest version of CRA, was hoping this would work out of the box. Not sure why just changing the file extension would cause this issue. I don't know if I'm the only one with this issue?

[Andarist]

This seems like some issue with CRA internal setup, could you report it there? I was able to make it work - https://codesandbox.io/s/2zv55v20yj but I had to inspect the transpiled output to see which identifier holds emotion exports, don't do this in production as it's unstable 😉

[nicolasschabram]

Not sure what is going on there, but this workaround sort of seems to work as well: https://codesandbox.io/s/7vq4omml1

Edit: Looks like a fix is underway: https://github.com/babel/babel/pull/9095

[Andarist]

The fix has been released in babel. If you reinstall your dependencies it should fix the problem. Please make sure you have installed @babel/[email protected] in your deps.