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

[Vadorequest]

Goal:

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

Once it's ready for v2-mst-aptd-at-lcz-sty, changes will be ported to v2-mst-aptd-gcms-lcz-sty preset.

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 FAILED
Commit a7cb72f failed to deploy to
click to see logs

[github-actions]

❌  Deployment FAILED
Commit c353b29 failed to deploy to
click to see logs

[github-actions]

✅  Deployment SUCCESS
Commit a5c140e successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-2t5p4xr46.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-upgrade-nex.vercel.app

[github-actions]

✅  E2E tests SUCCESS for commit a5c140e previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-2t5p4xr46.vercel.app

[github-actions]

✅  Deployment SUCCESS
Commit a9df25e successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-ocogpdpcc.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-upgrade-nex.vercel.app

[github-actions]

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

[github-actions]

✅  Deployment SUCCESS
Commit 6838ed3 successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-aydh0quhd.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-upgrade-nex.vercel.app

[github-actions]

✅  E2E tests SUCCESS for commit 6838ed3 previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-aydh0quhd.vercel.app

[github-actions]

✅  Deployment SUCCESS
Commit b121bbb successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-6ybeagfmh.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-upgrade-nex.vercel.app

[github-actions]

✅  E2E tests SUCCESS for commit b121bbb previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-6ybeagfmh.vercel.app

[github-actions]

✅  Deployment SUCCESS
Commit b121bbb successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-6ybeagfmh.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-upgrade-nex.vercel.app

[github-actions]

✅  E2E tests SUCCESS for commit b121bbb previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-6ybeagfmh.vercel.app