Upgrade to Next.js 12

[federicobadini]

The project has been updated to Next.js 12 and is now using the SWC compiler.
Jest tests however are still run via babel-jest / next/babel.

This is due to the fact that SWC strictly adhere to the ESModules specification so, according to how a module is declared, we may have difficulties in mocking up functions.

 Here is an example:


Function 1 is exported via named export, but since it is imported with a namespace notation, it ends up being not modifiable. So any mocking will fail.

This is tracked in several issues:
swc-project/swc#5205
swc-project/swc#3843 (comment)
jestjs/jest#9430

There seems to be a plugin specifically designed to solve this issue but currently overriding .swcrc in Next is not admitted

For those reasons I decided to - at least temporarily - continue using Babel for the Jest transform

cc @ardelato

QA

1. Visit the Vercel preview
2. Verify that there are no inconsistencies between the old Next.js 11 version and this version

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-commerce	✅ Ready (Inspect)	Visit Preview	Aug 15, 2022 at 10:20AM (UTC)
react-commerce-prod	✅ Ready (Inspect)	Visit Preview	Aug 15, 2022 at 10:20AM (UTC)

[danielbeardsley]

Wow. I'm surprised how little had to change in our code... almost nothing; mostly config changes.

CR 👍

Thanks @federicobadini

[erinemay]

Compared this preview and the main branch and confirmed the following are identical:

• Header links and link previews
• Breadcrumb links, link previews, appearance
• Appearance of each entire page is identical by going down the page space by space - spot checked /Parts and /Tools homepages and a few Parts children pages
• Search facets: Behavior, appearance, content
• Images
• Search
• Pagination
• Tab titles
• List/box view
• Log in/out states and user profile links when logged in
• Mini cart and checkout from mini cart
• Footer appearance and links
• Item type collection pages

General:

• No new console errors on this preview
• Spot checked the prod preview and confirmed parity with live collection pages

Browsers:

• Windows 11 Chrome + FF
• MacOS + Safari
• iOS + Safari
• Android + Chrome

Everything looks good and behaves identical to the main branch EXCEPT, the mobile hamburger menu isn't opening on this branch.

dev_block 🧷 It's not working on Safari or Chrome on mobile and tablet screen sizes.

There aren't any errors in the console when clicking on the menu button, it just doesn't open.

On iOS (image from iOS/Safari 15 on iPhone 13), after clicking on and failing to open the hamburger menu, the iFixit logo gets rendered like this:

Screen recordings

Android + Chrome

screenRecording-11-7-2022-11-31.mp4

iOS + Safari

screenRecording-11-7-2022-11-32.mp4

[federicobadini]

Fixed the drawer issue

[danielbeardsley]

CR 👍

Conflicts though.

[federicobadini]

CR 👍

Conflicts though.

Solved

[erinemay]

un_dev_block 🛩️

[k0rvusk0r4x]

• The hamburger menu hand logo are now fixed.
• Otherwise, continues to look as here.

QA 😺

[masonmcelvain]

CR ✌🏻