React 17 + new JSX transform + JSX pragma/pragmaFrag

Current behavior:

I’m currently using a barebones nextJS deployment with React 17.0.0-rc.3 and have added emotion to the project. I wanted to test out the new JSX transform but I’m running into issues, whenever I set

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

in a component, I run into compilation issues in said file. SyntaxError: pragma and pragmaFrag cannot be set when runtime is automatic.

my .babelrc file but is set below, and the issue is obviously with the value of runtime being set to automatic. that said, that’s how babel 8 will be set moving forward, and also is what allows the removal of requiring React in every file.

    {
      "presets": [
        "next/babel",
        ["@babel/preset-react", {
          "runtime": "automatic"
        }]
      ],
      "plugins": ["emotion"]
    }

I’m not sure if here, react, or the babel issues repo was the best to post in but settled here given it’s an issue with emotion’s setting of the pragma. I suspect a lot of this issue will be popping up soon once react 17 ships, so I thought i’d raise an issue so people aren’t lost on day 1 after ripping out all of the 'import React from “react”` across their app and realizing they just made a huge mistake.

Environment information:

• react version: 17.0.0-rc.3
• emotion version: 10.0.35

[fobbyal]

I’ve gotten the following to work with CRA4. This tells babel to transpile the file using the old way

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/core'

[Andarist]

@n8sabes just to confirm - you are using a prerelease of CRA 4 and React 17, right? I’m afraid that I don’t have a good recommendation for this situation yet. You could create a module like this: https://github.com/emotion-js/emotion/pull/1970#issuecomment-707173919 and use @jsxImportSource pragma to point to it, but it ain’t a super pleasant experience. We may be forced to recommend that new pragma in combination with CRA once we implement new factories for React 17. It’s a shame as it’s significantly longer than the current one:

/** @jsx jsx */

vs

/** @jsxImportSource @emotion/react */