Pragma and pragmaFrag cannot be set when runtime is automatic about nextjs-course-app

[arun8018]

@Billson7 Yeah stuck on frontend master styling video. Thanks bro.

[kevindsteeleii]

Thanks, that helped a lot. I kept just google-ing the error message and was getting nowhere fast.

[FarhanMobashir]

Thanks @Billson7

[jacksonbrim]

For anyone else seeing this recently, the above solutions didn't work for me. However, the theme-ui website does include an updated pragma comment:

/** @jsxImportSource theme-ui */

[jonaseriksson84]

Yep, that fixes it for now. Some more info:
system-ui/theme-ui#1160 (comment)

[BrianARuff]

This worked wonderfully, thanks! FEM should consider adding this to the course.

[matt-mainstreetdesign]

Thank you was also stuck on frontend master, this solved my issue.

[alvinalexander]

The official Theme UI docs suggest adding a custom babel.config.js: https://theme-ui.com/guides/jsx-pragma/#using-nextjs

[Nightwing627]

Hi, @Billson7
now, I have the same problem with the Next.js + theme-ui project.
As you mentioned, I already fixed the problems by adding the /** @jsxRuntime classic /.
But it's very boring work because I must touch all js files which declared the /* @jsx */ annotation.
Do you have another solution to solve this problem briefly?

It's my package.json
{
"name": "",
"version": "",
"private": true,
"scripts": {
"dev": "next dev -p 3003",
"build": "next build",
"serve": "next start",
"export": "next export",
"start": "next start -p 80",
"heroku-postbuild": "npm run build"
},
"dependencies": {
"dotenv": "^8.2.0",
"framer-motion": "^2.7.5",
"globby": "^11.0.0",
"isomorphic-unfetch": "^3.0.0",
"next": "^12.1.0",
"next-compose-plugins": "^2.2.0",
"next-optimized-images": "^2.5.4",
"prettier": "^2.1.2",
"prop-types": "^15.8.1",
"rc-drawer": "^4.1.0",
"react": "16.13.0",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "16.13.0",
"react-ga": "^3.1.2",
"react-icons": "^3.10.0",
"react-modal": "^3.14.4",
"react-modal-video": "1.2.6",
"react-multi-carousel": "^2.5.5",
"react-responsive-carousel": "^3.2.23",
"react-scroll": "^1.8.0",
"react-stickynode": "^3.0.3",
"theme-ui": "^0.3.1",
"typeface-dm-sans": "^1.1.3"
},
"devDependencies": {
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"next-sitemap": "^1.2.4"
}
}

and project structure is below

please help me,
Thanks.

[justinbanaga]

For the late-comers here none of the solutions above worked out for me. Here's what did:

1. I ran yarn add theme-ui @emotion/react @mdx-js/react. You can also use npm.

2. Replaced all JSX Pragma across all files in my project directory with the updated /** @jsxImportSource theme-ui */

3. Removed all import { jsx } from 'theme-ui' from all files. This will only work in Classic JSX runtime not in Automatic JSX runtime which is our goal.

4. Created a jsconfig.json file with the content below as stated in the With SWC section here:
   https://theme-ui.com/guides/jsx-pragma/

{ "compilerOptions": { "jsx": "preserve", "jsxImportSource": "theme-ui" // or "@theme-ui/core" // ... the rest of your compilerOptions redacted for brevity } }

5. Finally, I downgraded my @mdx-js/react package with yarn add @mdx-js/[email protected]

Hope this helps!

[PsionTheory]

5. @mdx-js/react package

Hi Justin Im running into difficulties with this method your suggesting, just wondering where im going wrong. i think its step 5, when i try to "downgrade" to @mdx-js/[email protected] i get a host of conflicts that i dont believe are resolved by the npm audit fix --force command. after i've downgraded, then fixed the discrepancies etc. and i execute the npm run dev.

[PsionTheory]

I'll attempt to correct the module not found error shown