Update babel config so that Emotion uses the newer JSX Runtime

[Vadorequest]

Upgrade emotion deps + update babel config so that Emotion uses the newer JSX Runtime - See vercel/next.js#18461 (comment)

See #242 and #245 where it's being done.

[github-actions]

❌  Deployment FAILED
Commit 225b3c8 failed to deploy to
click to see logs

[Vadorequest]

Failing with

For https://github.com/UnlyEd/next-right-now/blob/emotion-automatic-jsx-transform/src/pages/%5Blocale%5D/examples/built-in-utilities/security-audit.tsx, which import React.

10:16:41.390 | Error occurred prerendering page "/en-US/examples/built-in-utilities/security-audit". Read more: https://err.sh/next.js/prerender-error
-- | --
10:16:41.390 | ReferenceError: _jsx is not defined
10:16:41.390 | at MultiversalPageEntryPoint (/vercel/workpath0/.next/serverless/pages/[locale]/examples/built-in-utilities/security-audit.js:9800:3)
10:16:41.390 | at d (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
10:16:41.390 | at bb (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
10:16:41.390 | at a.b.render (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
10:16:41.390 | at a.b.read (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
10:16:41.390 | at exports.renderToString (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
10:16:41.390 | at Object.renderPage (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:50:851)
10:16:41.390 | at Function.getInitialProps (/vercel/workpath0/.next/serverless/pages/[locale]/examples/built-in-utilities/security-audit.js:3409:19)
10:16:41.390 | at Function.getInitialProps (/vercel/workpath0/.next/serverless/pages/[locale]/examples/built-in-utilities/security-audit.js:10140:85)
10:16:41.390 | at loadGetInitialProps (/vercel/workpath0/node_modules/next/dist/next-server/lib/utils.js:5:101)
10:16:41.445 | Unhandled error during request: ReferenceError: _jsx is not defined
10:16:41.445 | at MultiversalPageEntryPoint (/vercel/workpath0/.next/serverless/pages/[locale]/examples/built-in-utilities/packages-upgrade.js:9667:3)
10:16:41.445 | at d (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
10:16:41.445 | at bb (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
10:16:41.445 | at a.b.render (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
10:16:41.445 | at a.b.read (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
10:16:41.445 | at exports.renderToString (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
10:16:41.445 | at Object.renderPage (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:50:851)
10:16:41.445 | at Function.getInitialProps (/vercel/workpath0/.next/serverless/pages/[locale]/examples/built-in-utilities/packages-upgrade.js:3276:19)
10:16:41.446 | at Function.getInitialProps (/vercel/workpath0/.next/serverless/pages/[locale]/examples/built-in-utilities/packages-upgrade.js:10007:85)
10:16:41.446 | at loadGetInitialProps (/vercel/workpath0/node_modules/next/dist/next-server/lib/utils.js:5:101)

[karlhorky]

Yeah, I ran into something similar (although the error on my side was _jsxs is not defined).

Seems to be an issue with how the Babel presets for Next.js and Emotion play together:

vercel/next.js#18096

There is a stopgap workaround, but I think it's probably better to wait for a proper solution:

emotion-js/emotion#2064 (comment)

[github-actions]

✅  Deployment SUCCESS
Commit 40b18aa successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-pchov5e7f.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-emotion-aut.vercel.app

[github-actions]

✅  E2E tests SUCCESS for commit 40b18aa previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-pchov5e7f.vercel.app