diff --git a/packages/next/src/build/swc/options.ts b/packages/next/src/build/swc/options.ts
index d81375778e019..2751efbdec3e2 100644
--- a/packages/next/src/build/swc/options.ts
+++ b/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
diff --git a/test/e2e/app-dir/app-external/app-external.test.ts b/test/e2e/app-dir/app-external/app-external.test.ts
index 91c95ba2285b9..44576abcef0bc 100644
--- a/test/e2e/app-dir/app-external/app-external.test.ts
+++ b/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')
diff --git a/test/e2e/app-dir/app-external/app/browser/page.js b/test/e2e/app-dir/app-external/app/browser/page.js
new file mode 100644
index 0000000000000..5fa1381c6df57
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/test/e2e/app-dir/app-external/app/browser/worker.js b/test/e2e/app-dir/app-external/app/browser/worker.js
new file mode 100644
index 0000000000000..503cc8e702450
--- /dev/null
+++ b/test/e2e/app-dir/app-external/app/browser/worker.js
@@ -0,0 +1,3 @@
+import { value } from 'browser-module'
+
+self.postMessage('worker.js:' + value)
diff --git a/test/e2e/app-dir/app-external/node_modules_bak/browser-module/browser.js b/test/e2e/app-dir/app-external/node_modules_bak/browser-module/browser.js
new file mode 100644
index 0000000000000..60215f6777c41
--- /dev/null
+++ b/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')
diff --git a/test/e2e/app-dir/app-external/node_modules_bak/browser-module/index.js b/test/e2e/app-dir/app-external/node_modules_bak/browser-module/index.js
new file mode 100644
index 0000000000000..35b818f5f076e
--- /dev/null
+++ b/test/e2e/app-dir/app-external/node_modules_bak/browser-module/index.js
@@ -0,0 +1 @@
+export const value = 'browser-module/index'
diff --git a/test/e2e/app-dir/app-external/node_modules_bak/browser-module/package.json b/test/e2e/app-dir/app-external/node_modules_bak/browser-module/package.json
new file mode 100644
index 0000000000000..fbfb874e865ce
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/test/turbopack-tests-manifest.json b/test/turbopack-tests-manifest.json
index 67b588339fcbe..eb5bb2052743f 100644
--- a/test/turbopack-tests-manifest.json
+++ b/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": [],