Skip to content

How to disable new JSX transform and use old JSX transform #9873

Closed
@3xau1o

Description

@3xau1o

I created a new react project, it installed the new react 17.0.1 and react scripts 4.0, now i cannot use emotion, because throws error

pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | /** @jsx jsx */

on this line

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'

i know this is configured in babel so should i eject or is there a simpler way to disable just this new transform, i mean, if not it will break on projects using pragma like emotion

i mean like a USE_CLASSIC_RUNTIME boolean option on the .env file, that sets

 ["@babel/preset-react", {
      "runtime": "automatic"
    }]

to

["@babel/preset-react", {
      "runtime": "classic"
    }]

UPDATE

just ejected and seems that this options is already present

image

so just add DISABLE_NEW_JSX_TRANSFORM = true on your .env file

good luck!!

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions