fix: SSR invariant dehydration errors with bun #4228
Conversation
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
|
View your CI Pipeline Execution ↗ for commit 846bf44.
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/history
@tanstack/react-router
@tanstack/eslint-plugin-router
@tanstack/react-router-devtools
@tanstack/react-router-with-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-config
@tanstack/react-start-plugin
@tanstack/react-start-router-manifest
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-config
@tanstack/solid-start-plugin
@tanstack/solid-start-router-manifest
@tanstack/solid-start-server
@tanstack/start
@tanstack/start-api-routes
@tanstack/start-client-core
@tanstack/start-config
@tanstack/start-server-core
@tanstack/start-server-functions-client
@tanstack/start-server-functions-fetcher
@tanstack/start-server-functions-handler
@tanstack/start-server-functions-server
@tanstack/start-server-functions-ssr
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
|
I think it would be better if ensure that all tsr-once is before the entry script |
that's not possible as values might stream in later |
|
how can I reproduce the issue locally? |
For example: cd example/react/start-material-uiUpdate pnpm build
bun run .output/server/index.mjsOpen "localhost:3000" and enter F12 to switch the throttling to 3G Tap reload button on browser navigation bar, after reloading for about a dozen times (client entry scripts cached in memory), Invariant failed started to appear.
|
|
Even if tsr-once is in html, Invariant failed will still appear. So I think if this script is before client entry script, the problem should be solved. Or the other way to make sure hydrate is executed after |
|
Change script loading attribute from async to defer seems to solve this problem |
|
i found the issue, a synchronization error when injecting the scripts. I'll fix this as part of a rewrite of this section. |
|
very thankful |
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.
Related: #3989
The script assigned to
__TSR_SSR__.dehydratedappears outside the</html>tag. When the entry script/_build/assets/client-BJoNZ2zg.jsis cached locally by the browser, even if the entry script is async, the script outside the html may still be executed after the entry script.router/packages/start-server-core/src/transformStreamWithRouter.ts
Line 171 in 72ffeb4
Problems occur when
textis complete HTMLrouter/packages/start-server-core/src/transformStreamWithRouter.ts
Lines 174 to 175 in 72ffeb4
router/packages/start-server-core/src/transformStreamWithRouter.ts
Line 190 in 72ffeb4
bodyEndMatchis assigned before the!headStartedbranch processes chunkString.router/packages/start-server-core/src/transformStreamWithRouter.ts
Line 216 in 72ffeb4
The length of
bodyEndIndexobtained here will exceed the length of the modifiedchunkString, resulting in<script>being appended after</html>The solution is make sure hydrate is executed after TSR_SSR.dehydrated is assigned a value by other means.