Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

data-tsd-source inject-source plugin causes hydration mismatch in SSR (TanStack Start)

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#405 0 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
78/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Ruhig
Tech-Stack
react, typescript
Bereich
devtools

Rechercherichtung

Beginne in plugin.ts und untersuche den transform-Hook des Vite-Plugins inject-source, einschließlich der von Vite übergebenen ssr-Option. Überspringe die Quellinjektion bei SSR-Transformationen, während die clientseitige Injektion erhalten bleibt. Überprüfe anschließend, dass der gemeldete Hydration-Mismatch nicht mehr auftritt und click-to-source weiterhin verfügbar ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Description

The 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.

Reproduction

  1. Create a TanStack Start project with @tanstack/devtools-vite v0.6.0
  2. Add devtools() to vite.config.ts
  3. Navigate to any SSR-rendered route
  4. Observe console warning:
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.

<div
+ data-tsd-source="/src/routes/simulations/$slug/editor.tsx:632:5"
- data-tsd-source="/src/routes/simulations/$slug/editor.tsx:636:5"
>

Line 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.

Root Cause

In plugin.ts, the inject-source Vite plugin's apply function only checks config.mode === 'development':

apply(config) {
  return config.mode === 'development' && injectSourceConfig.enabled
},

The 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.

Suggested Fix

Skip source injection during the SSR transform pass. The Vite transform hook receives { ssr: boolean } as the third argument:

transform(code, id, options) {
  if (options?.ssr) return; // Only inject on client
  // ... existing Babel transform
}

This would eliminate the hydration mismatch while preserving click-to-source functionality on the client.

Workaround

Disable source injection entirely:

devtools({ injectSource: { enabled: false } })

This removes the hydration warning but loses click-to-source in the devtools UI.

Environment

  • @tanstack/devtools-vite: 0.6.0
  • @tanstack/react-start: latest
  • React 19
  • Vite 7
Vorherrschende Sprache
TypeScript
Sterne
501
Forks
101
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
4

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/devtools

Alle Issues in TanStack/devtools

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.