question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
dcastilcommented, Feb 2, 2021

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

0reactions
dbertellacommented, Feb 3, 2021

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

pragma and pragmaFrag cannot be set when runtime ... - GitHub
Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic. edit: The same issue now exists with the latest version of...
Read more >
Emotion CSS Prop and Nextjs new JSX runtime - error
I get the following error : pragma and pragmaFrag cannot be set when runtime is automatic. If I remove the pragma /** @jsx...
Read more >
Migrating React 17 & Emotion 11: "pragma and pragmaFrag ...
Anyone migrated React 17 & Emotion 11; Anyone got depression with the ... pragma and pragmaFrag cannot be set when runtime is automatic....
Read more >
JSX Pragma - Theme UI
Theme UI uses custom JSX functions and JSX import source comments to allow ... also called "automatic runtime" (backported to React v16.14.0) If...
Read more >
@mdx-js/mdx | MDX
@jsxRuntime automatic @jsxImportSource react */ import {Fragment as _Fragment, ... will always be set to true and the MDX nodes are passed through....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found