René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"data-tsd-source inject-source plugin causes hydration mismatch in SSR (TanStack Start)","articleBody":"## Description\n\nThe `inject-source` plugin in `@tanstack/devtools-vite` causes React hydration mismatch warnings in TanStack Start (SSR) projects. The `data-tsd-source` attributes are injected with different line numbers on the server vs client transform passes, because other Vite plugins (e.g. `tanstackStart()`, `viteReact()`) shift line numbers differently between SSR and client bundles.\n\n## Reproduction\n\n1. Create a TanStack Start project with `@tanstack/devtools-vite` v0.6.0\n2. Add `devtools()` to `vite.config.ts`\n3. Navigate to any SSR-rendered route\n4. Observe console warning:\n\n```\nA tree hydrated but some attributes of the server rendered HTML didn't match the client properties.\n\n\u003cdiv\n+ data-tsd-source=\"/src/routes/simulations/$slug/editor.tsx:632:5\"\n- data-tsd-source=\"/src/routes/simulations/$slug/editor.tsx:636:5\"\n>\n```\n\nLine numbers are consistently off by a fixed offset (4 lines in my case) — the server and client transforms produce different source locations for the same JSX elements.\n\n## Root Cause\n\nIn `plugin.ts`, the `inject-source` Vite plugin's `apply` function only checks `config.mode === 'development'`:\n\n```typescript\napply(config) {\n  return config.mode === 'development' && injectSourceConfig.enabled\n},\n```\n\nThe `transform` hook does not check the `ssr` boolean that Vite passes as the third argument. Since `data-tsd-source` is only useful on the client (for click-to-source in the devtools UI), injecting it during the SSR pass creates the mismatch.\n\n## Suggested Fix\n\nSkip source injection during the SSR transform pass. The Vite `transform` hook receives `{ ssr: boolean }` as the third argument:\n\n```typescript\ntransform(code, id, options) {\n  if (options?.ssr) return; // Only inject on client\n  // ... existing Babel transform\n}\n```\n\nThis would eliminate the hydration mismatch while preserving click-to-source functionality on the client.\n\n## Workaround\n\nDisable source injection entirely:\n\n```typescript\ndevtools({ injectSource: { enabled: false } })\n```\n\nThis removes the hydration warning but loses click-to-source in the devtools UI.\n\n## Environment\n\n- `@tanstack/devtools-vite`: 0.6.0\n- `@tanstack/react-start`: latest\n- React 19\n- Vite 7","author":{"url":"https://github.com/twentynineteen","@type":"Person","name":"twentynineteen"},"datePublished":"2026-03-26T09:58:22Z","url":"https://github.com/TanStack/devtools/issues/405"}