Upgrade v2-mst-aptd-gcms-lcz-sty preset to Next.js 10

[Vadorequest]

Goal:

Upgrade the v2-mst-aptd-gcms-lcz-sty preset to Next.js 10. See https://nextjs.org/blog/next-10

Major deps updates:

• Next 9 > 10.0.0
• React 16 > 17

Encountered issues:

• Running react@latest react-dom@latest crashes with pragma and pragmaFrag cannot be set when runtime is automatic.
  • This is related to React 17 which is not compatible with Emotion due to some Babel thingy (See the resources section below). See Make JSX pragmas override the configured runtime mode babel/babel#12208, React 17 + new JSX transform + JSX pragma/pragmaFrag emotion-js/emotion#2041 (comment), babel-preset: Support plugin-transform-react-jsx's automatic runtime emotion-js/emotion#1969, Added new JSX entry points for the automatic runtime emotion-js/emotion#1970
  • Solution proposed at Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic. system-ui/theme-ui#1160 (comment) doesn't seem to work (tested in .env + per file)
  • Solution proposed at Upgrading to Next.js 10 and React 17 - Webpack build fails with pragma has been set but pragmaFrag has not been set vercel/next.js#18461 (comment) did work

Non-backward compatible changes:

• It is not possible to use the JSX pragma /** @jsx jsx */ anymore, because doing so isn't compatible with the new babel automatic JSX Transform.
  • Same goes for /** @jsxFrag React.Fragment */ (NRN didn't use it, but you might)
  • Also, all references of jsx from '@emotion/core' are to be removed (unused)
  • Overall, that's a good news, less boilerplate code to use Emotion.

Noticeable changes:

• A new babel.config.js file had to be added, to provide support of the new automatic JSX Transform with Emotion
  • See https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-css-prop
  • If you don't use Emotion, you don't need the babel file.

Resources:

• https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

[github-actions]

✅  Deployment SUCCESS
Commit 3dd17be successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-85doau5v0.vercel.app
Deployment aliased as v2-mst-aptd-gcms-lcz-sty.vercel.app

[github-actions]

❌  Deployment FAILED
Commit 4c48186 failed to deploy to
click to see logs

[github-actions]

❌  Deployment FAILED
Commit 4c48186 failed to deploy to
click to see logs

[github-actions]

✅  Deployment SUCCESS
Commit e39c13a successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-qenazwfm5.vercel.app
Deployment aliased as nrn-v2-mst-aptd-gcms-lcz-sty-c1-next-10-g.vercel.app

[github-actions]

✅  E2E tests SUCCESS for commit e39c13a previously deployed at https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-qenazwfm5.vercel.app

[github-actions]

❌  E2E tests FAILED for commit 3dd17be previously deployed at https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-3zd8v3wud.vercel.app
Download artifacts (screenshots + videos) from checks section

[github-actions]

✅  Deployment SUCCESS
Commit f874e94 successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-o2nslci9o.vercel.app
Deployment aliased as nrn-v2-mst-aptd-gcms-lcz-sty-c1-next-10-g.vercel.app

[github-actions]

✅  E2E tests SUCCESS for commit f874e94 previously deployed at https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-o2nslci9o.vercel.app