Fix extra swc optimizer applied to node_modules in browser layer (#62051

)

Disable swc transform optimizer for node_modules in browser layer of app
router bundles

Fixes #61858
Fixes #60644
Fixes #60920
Fixes #61740
Closes NEXT-2418

In browser there could be not only one runtime, it could have both js
worker and browser. In js worker the `typeof window` is not as same as
in browser, so disabling the swc optimizer which will replace the code.
Leave the condition as it as.

packages/next/src/build/swc/options.ts

@@ -482,6 +482,11 @@ export function getLoaderSWCOptions({
     options.isPageFile = false
     options.optimizeServerReact = undefined
     options.cjsRequireOptimizer = undefined
+    // Disable optimizer for node_modules in app browser layer, to avoid unnecessary replacement.
+    // e.g. typeof window could result differently in js worker or browser.
+    if (options.jsc.transform.optimizer.globals?.typeofs) {
+      delete options.jsc.transform.optimizer.globals.typeofs.window
+    }
   }
 
   return options

test/e2e/app-dir/app-external/app-external.test.ts

@@ -1,5 +1,5 @@
 import { createNextDescribe } from 'e2e-utils'
-import { check, hasRedbox, shouldRunTurboDevTest } from 'next-test-utils'
+import { check, hasRedbox, retry, shouldRunTurboDevTest } from 'next-test-utils'
 
 async function resolveStreamResponse(response: any, onData?: any) {
   let result = ''
@@ -153,6 +153,19 @@ createNextDescribe(
       ).toMatch(/^__myFont_.{6}, __myFont_Fallback_.{6}$/)
     })
 
+    it('should not apply swc optimizer transform for external packages in browser layer', async () => {
+      const browser = await next.browser('/browser')
+      expect(await browser.elementByCss('#worker-state').text()).toBe('default')
+
+      await browser.elementByCss('button').click()
+
+      await retry(async () => {
+        expect(await browser.elementByCss('#worker-state').text()).toBe(
+          'worker.js:browser-module/other'
+        )
+      })
+    })
+
     describe('react in external esm packages', () => {
       it('should use the same react in client app', async () => {
         const html = await next.render('/esm/client')

test/e2e/app-dir/app-external/app/browser/page.js

@@ -0,0 +1,22 @@
+'use client'
+import { useState } from 'react'
+
+export default function Home() {
+  const [state, setState] = useState('default')
+  return (
+    <div>
+      <button
+        onClick={() => {
+          const worker = new Worker(new URL('./worker', import.meta.url))
+          worker.addEventListener('message', (event) => {
+            setState(event.data)
+          })
+        }}
+      >
+        Get web worker data
+      </button>
+      <p>Worker state: </p>
+      <p id="worker-state">{state}</p>
+    </div>
+  )
+}

test/e2e/app-dir/app-external/app/browser/worker.js

@@ -0,0 +1,3 @@
+import { value } from 'browser-module'
+
+self.postMessage('worker.js:' + value)

test/e2e/app-dir/app-external/node_modules_bak/browser-module/browser.js

@@ -0,0 +1,4 @@
+'use client'
+
+export const value =
+  'browser-module/' + (typeof window !== 'undefined' ? 'browser' : 'other')

test/e2e/app-dir/app-external/node_modules_bak/browser-module/index.js

@@ -0,0 +1 @@
+export const value = 'browser-module/index'

test/e2e/app-dir/app-external/node_modules_bak/browser-module/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "exports": {
+    "browser": "./browser.js",
+    "default": "./index.js"
+  }
+}

test/turbopack-tests-manifest.json

@@ -2560,7 +2560,8 @@
     "failed": [
       "app dir - external dependency server actions should compile server actions from node_modules in client components",
       "app dir - external dependency should be able to opt-out 3rd party packages being bundled in server components",
-      "app dir - external dependency should have proper tree-shaking for known modules in CJS"
+      "app dir - external dependency should have proper tree-shaking for known modules in CJS",
+      "app dir - external dependency should not apply swc optimizer transform for external packages in browser layer"
     ],
     "pending": [],
     "flakey": [],