Fix extra swc optimizer applied to node_modules in browser layer (#62051)
### What 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 ### Why 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.
This commit is contained in:
parent
9559e440f4
commit
cfedc529c7
8 changed files with 58 additions and 2 deletions
|
@ -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
|
||||
|
|
|
@ -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')
|
||||
|
|
22
test/e2e/app-dir/app-external/app/browser/page.js
Normal file
22
test/e2e/app-dir/app-external/app/browser/page.js
Normal file
|
@ -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>
|
||||
)
|
||||
}
|
3
test/e2e/app-dir/app-external/app/browser/worker.js
Normal file
3
test/e2e/app-dir/app-external/app/browser/worker.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
import { value } from 'browser-module'
|
||||
|
||||
self.postMessage('worker.js:' + value)
|
|
@ -0,0 +1,4 @@
|
|||
'use client'
|
||||
|
||||
export const value =
|
||||
'browser-module/' + (typeof window !== 'undefined' ? 'browser' : 'other')
|
|
@ -0,0 +1 @@
|
|||
export const value = 'browser-module/index'
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"type": "module",
|
||||
"exports": {
|
||||
"browser": "./browser.js",
|
||||
"default": "./index.js"
|
||||
}
|
||||
}
|
|
@ -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": [],
|
||||
|
|
Loading…
Reference in a new issue