TanStack / TanStack/router

react-start + vitest: Cannot read properties of null (reading 'useState')

Open
#6,246 6 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Start

Describe the bug

When using TanStack Start with Vitest, tests fail with:

TypeError: Cannot read properties of null (reading 'useState')

This now reproduces in a single-package project (no pnpm workspace / monorepo required). The failure occurs when a component using React hooks is rendered during Vitest runs.

Root Cause: The TanStack Start Vite plugin applies optimizeDeps configuration unconditionally, including in the Vitest test environment. This interferes with module resolution, causing React to be resolved as null during tests.

Impact: This bug affects TanStack Start + Vitest even without any workspace setup, so it's not limited to monorepos. Any app running Vitest with the plugin enabled hits the same failure.

// This errors:
plugins: [tanstackStart(), viteReact()]
// This does not error:
plugins: [
  process.env.VITEST !== 'true' && tanstackStart(),
  viteReact(),
]
Your Example Website or App

https://github.com/onlywei/repro-tanstack-start-vitest

Steps to Reproduce the Bug or Issue
  1. Clone the repro: https://github.com/onlywei/repro-tanstack-start-vitest
  2. Run pnpm install
  3. Run pnpm test
Expected behavior

Tests should pass without errors. Components that use React hooks should render normally during Vitest test execution.

The TanStack Start plugin should not interfere with Vitest's module resolution. Ideally, the plugin should automatically detect when running in a test environment and skip optimization steps that are not needed for testing.

Screenshots or Videos

No response

Platform
  • Router / Start Version: 1.157.18
  • OS: macOS
  • Vite Version: 7.3.1
  • Vitest version: 4.0.18
Additional context

The repro repo has been simplified to a single-package layout to demonstrate this is not a workspace-specific issue.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The relevant entry point is the TanStack Start Vite plugin's optimizeDeps handling; start by examining how it is applied during Vitest runs. Reproduce with the linked single-package app using pnpm install and pnpm test, and consider the issue complete when React hook components render and the tests pass without the plugin breaking module resolution.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
build-system, testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
57/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.