Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic.

[t2ca]

I started having this error since updating Gatsby to the most recent version and updating React to v17.

Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic.

edit: The same issue now exists with the latest version of React [email protected], right now the only fix is to go back to [email protected] and [email protected]

[hasparus]

Nice catch!

To support automatic runtime, we'll need to add _jsx and _jsxs exports to theme-ui, and then update transform-react-jsx config.

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false, // defaults to true
        "runtime": "automatic", // defaults to classic
        "importSource": "theme-ui" // defaults to react
      }
    ]
  ]
}

https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#react-automatic-runtime

---

As a workaround, you can change your runtime to classic.

[dcastil]

I think the necessary imports are jsx and jsxs, not _jsx and _jsxs. This would be a breaking change because the current jsx function exported from theme-ui wouldn't work with the new 2-arg calls.

Or a new package could be created, like @theme-ui/jsx. Then one could use theme-ui with a comment like

/** @jsxImportSource @theme-ui/jsx */

[hasparus]

I think the necessary imports are jsx and jsxs, not _jsx and _jsxs.

Correct.

---

Note: keep track of emotion-js/emotion#1970

[testowenyoung]

Same problem.

[iamskok]

I'm also experiencing the same issue with [email protected], [email protected], and [email protected]. Which package introduced this bug? Is there any temporary fix?

[t2ca]

I'm also experiencing the same issue with [email protected] and [email protected]. Which package introduced this bug? Is there any temporary fix?

I believe these issues are because of recent changes to React. I got it working with [email protected] and [email protected] and [email protected]

[iamskok]

I'm also experiencing the same issue with [email protected] and [email protected]. Which package introduced this bug? Is there any temporary fix?

I believe these issues are because of recent changes to React. I got it working with [email protected] and [email protected] and [email protected]

What gatsby version are you on?

[t2ca]

I'm also experiencing the same issue with [email protected] and [email protected]. Which package introduced this bug? Is there any temporary fix?

I believe these issues are because of recent changes to React. I got it working with [email protected] and [email protected] and [email protected]

What gatsby version are you on?

Most recent version, [email protected]

[fatihyildizhan]

I have the same problem. Here is my dependencies:

"dependencies": {
    "@rocketseat/gatsby-theme-docs": "^2.2.3",
    "gatsby": "^2.24.78",
    "gatsby-plugin-canonical-urls": "^2.3.13",
    "gatsby-plugin-google-analytics": "^2.3.18",
    "gatsby-plugin-manifest": "^2.4.34",
    "gatsby-plugin-offline": "^3.2.32",
    "gatsby-plugin-sitemap": "^2.4.17",
    "prop-types": "^15.7.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0"
  }

It is working with [email protected] and [email protected]. Thanks to tc2a.

[hasparus]

Waiting for emotion-js/emotion#1970 or alternative work in Emotion.

[dcastil]

Just adding here in case anyone sees this error message after upgrading a project to create-react-app v4:

Theme UI currently only supports the classic JSX runtime. Until emotion is upgraded to support the automatic runtime and Theme UI can be upgraded, add the comment /** @jsxRuntime classic */ to all files using the sx prop. This should fix the issue.

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from 'theme-ui';

You can also disable the automatic runtime globally instead by setting the environment variable DISABLE_NEW_JSX_TRANSFORM=true, e.g. in your .env file.

[sudarshan070]

same problem,
pragma and pragmaFrag cannot be set when runtime is automatic.
, "dependencies": {
"@theme-ui/presets": "^0.3.0",
"body-parser": "^1.19.0",
"dotenv-load": "^2.0.0",
"next": "^9.2.2",
"next-connect": "^0.9.1",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"theme-ui": "^0.3.1"
}

[hasparus]

@sudarshan070 You need to use classic runtime. Take a look at dcastil's post.

[alexis-regnaud]

Seems like Emotion was upgraded in order to support new JSX Runtime : https://github.com/emotion-js/emotion/blob/master/packages/core/CHANGELOG.md
Just waiting Theme-UI upgrade now ;)

[hasparus]

#1237 will close this.

[dcastil]

I marked that #1237 will close this. However, I'm not sure whether that's the best approach. pragma and pragmaFrag will never work in the automatic JSX runtime, that's intended behaviour.

[hasparus]

pragma and pragmaFrag will never work in the automatic JSX runtime, that's intended behaviour.

I never interpreted the title of this issue as "please make pragmaFrag work in automatic runtime", but I think you're right.
We also need to update the docs to educate about classic and automatic runtime, and change /* @jsx jsx */ occurences in there to @jsxImportSource, as automatic runtime became the default.

[JosephThomasVasquez]

Just adding here in case anyone sees this error message after upgrading a project to create-react-app v4:

Theme UI currently only supports the classic JSX runtime. Until emotion is upgraded to support the automatic runtime and Theme UI can be upgraded, add the comment /** @jsxRuntime classic */ to all files using the sx prop. This should fix the issue.

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from 'theme-ui';

You can also disable the automatic runtime globally instead by setting the environment variable DISABLE_NEW_JSX_TRANSFORM=true, e.g. in your .env file.

Confirming it works with dependencies:

"@theme-ui/presets": "^0.3.5",
   "next": "^10.0.7",
   "react": "^17.0.1",
   "react-dom": "^17.0.1",
   "theme-ui": "^0.3.5"