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

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.

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"

Waiting for https://github.com/emotion-js/emotion/pull/1970 or alternative work in Emotion.

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 😉

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.

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.

https://github.com/system-ui/theme-ui/pull/1237 will close this.

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 react@16.13.1 and react-dom@16.13.1. Thanks to tc2a.

I’m also experiencing the same issue with gatsby-plugin-theme-ui@0.4.0-rc.5 and theme-ui@0.4.0-rc.5. 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 gatsby-plugin-theme-ui@0.3.0 and react@16.13.1 and react-dom@16.13.1

What gatsby version are you on?

Most recent version, gatsby@2.24.78

I’m also experiencing the same issue with gatsby-plugin-theme-ui@0.4.0-rc.5 and theme-ui@0.4.0-rc.5. 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 gatsby-plugin-theme-ui@0.3.0 and react@16.13.1 and react-dom@16.13.1

What gatsby version are you on?

I’m also experiencing the same issue with gatsby-plugin-theme-ui@0.4.0-rc.5 and theme-ui@0.4.0-rc.5. 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 gatsby-plugin-theme-ui@0.3.0 and react@16.13.1 and react-dom@16.13.1