From a65e3612d0a2e16308f3d2a9d962bead435fa587 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Fri, 4 Feb 2022 11:08:01 -0600
Subject: [PATCH] Ensure optional chaining in swc matches babel (#33995)

This ensures we always transpile optional chaining and nullish coalescing with swc the same as we do [with babel](https://github.com/vercel/next.js/blob/4812e229928dc01ae21ee0533685f6813694c136/packages/next/build/babel/preset.ts#L97-L98) since it can cause issues with webpack even when the node target supports these features.

The specific case this seems to cause issues with webpack is when a value is imported and optional chaining is used on the import value webpack is stripping the optional chaining cc @sokra

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

Fixes: https://github.com/vercel/next.js/issues/33915
---
 packages/next/build/swc/options.js         | 14 ++++++++++++++
 test/integration/production/pages/about.js |  4 ++++
 2 files changed, 18 insertions(+)

diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js
index 53d2027fee019eb..ce9f7634fc17554 100644
--- a/packages/next/build/swc/options.js
+++ b/packages/next/build/swc/options.js
@@ -117,6 +117,13 @@ export function getJestSWCOptions({
         // Targets the current version of Node.js
         node: process.versions.node,
       },
+      // we always transpile optional chaining and nullish coalescing
+      // since it can cause issues with webpack even if the node target
+      // supports them
+      include: [
+        'proposal-optional-chaining',
+        'proposal-nullish-coalescing-operator',
+      ],
     },
     module: {
       type: esm && !isNextDist ? 'es6' : 'commonjs',
@@ -165,6 +172,13 @@ export function getLoaderSWCOptions({
           // Targets the current version of Node.js
           node: process.versions.node,
         },
+        // we always transpile optional chaining and nullish coalescing
+        // since it can cause issues with webpack even if the node target
+        // supports them
+        include: [
+          'proposal-optional-chaining',
+          'proposal-nullish-coalescing-operator',
+        ],
       },
     }
   } else {
diff --git a/test/integration/production/pages/about.js b/test/integration/production/pages/about.js
index 8b84bddadb34ba9..1bcf785625cb536 100644
--- a/test/integration/production/pages/about.js
+++ b/test/integration/production/pages/about.js
@@ -1 +1,5 @@
+import info from '../info.json'
+
+console.log('info:', info?.something?.nested)
+
 export default () => <div className="about-page">About Page</div>