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

Bắt đầu trong plugin.ts và kiểm tra hook transform của plugin Vite inject-source, bao gồm tùy chọn ssr được Vite truyền vào. Bỏ qua việc chèn source đối với các phép transform SSR nhưng vẫn giữ việc chèn ở phía client, sau đó xác minh rằng hydration mismatch được báo cáo không còn xảy ra và click-to-source vẫn khả dụng.

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