turbopack: mark injected chunk scripts as async for React DOM dedupe#92753
Open
gurkerl83 wants to merge 1 commit intovercel:canaryfrom
Open
turbopack: mark injected chunk scripts as async for React DOM dedupe#92753gurkerl83 wants to merge 1 commit intovercel:canaryfrom
gurkerl83 wants to merge 1 commit intovercel:canaryfrom
Conversation
Client-side App Router navigations can request the same route chunk twice when Turbopack and React DOM both try to load it. React DOM reuses hoistable scripts by `src` and looks them up in the DOM via `script[async][src="..."]`. Turbopack's DOM chunk loader inserted matching chunk scripts without explicitly setting `async`, so React DOM could miss an already-present script and append a second one for the same URL. Set `script.async = true` when Turbopack appends JS chunk scripts so both code paths converge on the same DOM identity. Dynamically inserted scripts already load asynchronously, so this makes the DOM representation explicit without changing load behavior. Fixes: vercel#92689
Collaborator
|
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
Merging this PR will not alter performance
Comparing Footnotes
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Set
script.async = trueon JS chunk scripts created by Turbopack's DOM runtime backend.Why?
Client-side App Router navigations request the same route chunk twice when Turbopack and React DOM both try to load it.
The reproducer and investigation are here:
In particular, the investigation notes describe
"Option A: Add
asyncAttribute to Turbopack's Script Tags", which is what this PR implements.React DOM reuses hoistable scripts by
srcand looks them up in the DOM viascript[async][src="..."]. Turbopack's DOM chunk loader inserted matching chunk scripts without explicitly settingasync, so React DOM misses an already-present script and appends a second one for the same URL.How?
Set
asyncexplicitly on Turbopack-inserted chunk scripts so they participate in the same DOM dedupe path that React DOM uses for hoistable scripts.Dynamically inserted scripts already load asynchronously, so this only makes the DOM representation explicit without changing load behavior.
This change is in Turbopack's DOM runtime backend, which is used for both development and production DOM chunk loading.
Verification
Validating this change against the reproducer requires:
next.jscheckout, run a full rebuild so the Turbopack nativebinary is rebuilt with the updated embedded DOM runtime sources:
Without NEXT_TEST_NATIVE_DIR, the reproducer may resolve a different native binding and not include the patched runtime.
Fixes #92689