Repository navigation
Server only packages leaking into client bundle via tanstack query #3401
Description
Which project does this relate to?
Start
Describe the bug
I am trying to get react query to fetch session info with better auth on the server. Drizzle is getting bundled and shipped to the browser even though it is behind a serverfn. Codepath for this in the linked repo is
app/routes/__root.tsxbeforeLoadlib/auth/query.tsauthQueryOptionslib/auth/api.tsgetAuthlib/auth/auth.tsauthlib/drizzle/db.tsdb
Note: The stackblitz version of the repo is giving a totally different error for some reason.
Your Example Website or App
https://stackblitz.com/~/github.com/ryan-callahan-edo/tanstack-start-client-bundle-error
Steps to Reproduce the Bug or Issue
- clone https://github.com/ryan-callahan-edo/tanstack-start-client-bundle-error
- run
bun i && bun run dev - navigate to page
- see error in console
- observe error stopping all js from being executed
- observe drizzle bundles being shipped to the browser
Expected behavior
- clone https://github.com/ryan-callahan-edo/tanstack-start-client-bundle-error
- run
bun i && bun run dev - navigate to page
- see no error in console
- Page functions normally
Screenshots or Videos
Screen.Recording.2025-02-11.at.9.05.25.PM.mov
Platform
- OS: macOS
- Browser: Chrome
- Version: 131
Additional context
No response
Activity
ryan-callahan-edo commentedon Feb 12, 2025
This seems to be a recurring issue for me every time I upgrade versions of tanstack start. Any guidance for debugging or getting around this?
akawahuynh commentedon Mar 5, 2025
No this is your fault, you just skipped the tsconfig.json configuration step:
https://tanstack.com/start/latest/docs/framework/react/build-from-scratch#typescript-configuration
which makes the flag
verbatimModuleSyntax: trueplease remove this
ryan-callahan-edo commentedon Mar 5, 2025
Great catch, thank you! I ended up getting around it in my private repos by manually typing things with primitives rather than inferring types. Now I can go back to inference.
docs(start): Add note for verbatimModuleSyntax setting in tsconfig do…
ryanagillie commentedon Mar 12, 2025
After doing some investigation, the reason why the setting needs to be disabled is because during the client / server separation step something like
import { something, type Thing } from "./only-server-code"is being transformed into
import { type Thing } from "./only-server-code"which is then being transformed by tsc / esbuild / rollup (they all follow the
verbatimModuleSyntaxflag) intoimport { } from "./only-server-code"which is causing the leak
Disabling
verbatimModuleSyntaxremoves that empty import, but the downside is that if that import has any side-effects, none of them are ran.RyanCallahan312 commentedon Mar 12, 2025
I purposefully avoid that pattern in my code, but I can see this being a really tricky "gotcha" to debug for someone in the future. Is it used commonly enough where it's worth calling out or linking to this issue in the docs? https://tanstack.com/start/latest/docs/framework/react/build-from-scratch#typescript-configuration
fix(db,eslint,typescript): disable verbatimModuleSyntax (tanstack rec…