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

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 react@16.14.0, right now the only fix is to go back to react@16.13.1 and react-dom@16.13.1

[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.

[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"