Merge branch 'canary' into send-ga-event-fix

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

packages/next/src/lib/server-external-packages.json

@@ -40,6 +40,7 @@
   "prettier",
   "prisma",
   "puppeteer",
+  "puppeteer-core",
   "rimraf",
   "sharp",
   "shiki",

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

@@ -2567,7 +2567,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 be able to opt-out 3rd party packages being bundled in server components",
+      "app dir - external dependency should not apply swc optimizer transform for external packages in browser layer"
     ],
     "pending": [],
     "flakey": [],