Gettting pragma and pragmaFrag cannot be set when runtime is automatic when using @jsxImportSource

Describe the bug I see there is a discrepancy between the official docs and the readme file in github about what pragma to import in order to make the sx prop work. I’m trying to use what I see in the readme that seems more up to date, but it looks like something is missing. Do I have to import a different package in order to have the new pragma available? I’m using latest Create react app and latest typescript. What’s the correct way to handle this nowadays?

Right now I’m getting this error:

pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | /** @jsxImportSource theme-ui */

Dependencies

"react": "17.0.1",
    "react-dom": "17.0.1",
    "react-scripts": "^4.0.1",
    "theme-ui": "^0.3.5",
    "typescript": "^4.1.3",

Thanks!

[dcastil]

I don’t need to install anything else right? just plain theme ui correct?

Yes, you should only need to install theme-ui and then use the comment /** @jsxImportSource theme-ui */ at the top of every file in which you want to use Theme UI.

Do you have a working example perhaps I can look at?

I made a minimal working example with create-react-app and TypeScript here → https://codesandbox.io/s/cra-example-theme-ui-3lg5c?file=/src/App.tsx You can try removing stuff from your app until it looks like the example here to figure out where the problem is exactly.

How do I set the runtime?

If you’re using create-react-app v4.0.0 or higher, you’re using the automatic runtime already. The error message you posted only shows up in the automatic runtime. But you can downgrade to the classic runtime by putting DISABLE_NEW_JSX_TRANSFORM=true into your env file. More on that here: https://create-react-app.dev/docs/advanced-configuration

[dbertella]

Yes I noticed few changes actually but I’m trying latest alpha now. Yeah I totally missed that. Isn’t it worth to add a comment in the readme mentioning that? Anyway thank you very much and looking forward for the new version!