"Error: Webpack Compilation Error" with "pragma and pragmaFrag cannot be set when runtime is automatic" when changing Babel configuration with Next.js

[Vadorequest]

Cross-posting as I don't know whether the bug is due to Cypress or Next.js Babel configuration.

See vercel/next.js#20952

TLDR; A comment in a Cypress file makes E2E Cypress tests fail due to a perfectly fine comment that is interpreted as a JSX pragma. Webpack fails to compile Cypress file since I configured Babel to use automatic runtime with Next.js, only affects Cypress, not Next.js

[Vadorequest]

The issue might be Cypress doesn't support automatic mode? Or require some additional configuration for it to work properly?

A similar issue happened with MDX a while ago, basically Emotion provides a way to use JSX "automatic" pragma through Babel config (and avoid writing /* @jsx jsx */ on top of every file using Emotion), but this wasn't properly supported by MDX and led to issues, as explained at mdx-js/mdx#990

I feel like something similar happens here, I changed the babel configuration to make it work with Emotion 11, but it broke Cypress in the process.

[Vadorequest]

This was a Babel/Webpack/TS configuration issue introduced by changing the babel config required by Emotion 11. It has been explained and fixed at UnlyEd/next-right-now#247