@tanstack/router-plugin/vite and unplugin-auto-import/vite compatibility issues

[JsonLee12138]

Which project does this relate to?

Router

Describe the bug

When using @tanstack/router-plugin/vite together with unplugin-auto-import/vite, auto-imported functions (like React hooks) throw runtime ReferenceError, even though TypeScript compilation succeeds without errors.

Your Example Website or App

https://stackblitz.com/edit/github-5wvqnagp?file=vite.config.js

Steps to Reproduce the Bug or Issue

1. Install both plugins:

pnpm add -D @tanstack/router-plugin unplugin-auto-import

2. Configure vite.config.ts:

import { tanstackRouter } from '@tanstack/router-plugin/vite';
import AutoImport from 'unplugin-auto-import/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['react'],
      dts: './src/auto-imports.d.ts',
    }),
    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
      routesDirectory: './src/pages',
    }),
    react(),
  ],
});

3. Create a route file at src/pages/login.tsx:

import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/login')({
  component: RouteComponent,
});

function RouteComponent() {
  const [username, setUsername] = useState(''); // No explicit import
  return <div>{username}</div>;
}

4. Run the dev server and navigate to /login

⚠️ Expected Behavior

• useState should be auto-imported at runtime by unplugin-auto-import
• The component should render without errors

❌ Actual Behavior

Runtime error in browser:

ReferenceError: useState is not defined
    at RouteComponent (login.tsx:8:35)

Important observations:

• ✅ TypeScript does NOT show any errors (types are correctly generated in auto-imports.d.ts)
• ✅ Without @tanstack/router-plugin/vite, auto-import works perfectly
• ❌ With @tanstack/router-plugin/vite, auto-imported functions are undefined at runtime

Expected behavior

After enabling auto-complete, it can be recognized normally.

Screenshots or Videos

Platform

• Router / Start Version: ^1.133.27
• OS: macOS
• Browser: Chrome
• Browser Version: [e.g. 91.1]
• Bundler: vite
• Bundler Version: npm:rolldown-vite@7.1.14

Additional context

No response

[Wyatex]

Same issue with VITE v8.0.0-beta.16

[Wyatex]

I figured out what's going on. When autoCodeSplitting is set to true, the Comp.tsx file is logically split into two files: Comp.tsx and Comp.tsx?tsr-split=component. The actual source code is logically moved to Comp.tsx?tsr-split=component, while the Comp.tsx file simply becomes something like () => import('Comp.tsx?tsr-split=component'). Since .tsx?tsr-split=component doesn't match the default include rules of auto-import, we just need to edit rule for .tsx?tsr-split=component.

export default defineConfig({
  plugins: [
    tanstackRouter({ target: 'react', autoCodeSplitting: true }),
    react(),
    AutoImport({
      include: [
        /\.[tj]sx?(?:\?.*)?$/
      ],
      // ...
    }),
  ],
});

https://stackblitz.com/edit/github-5wvqnagp-y4utkzwn?file=vite.config.js

[schiller-manuel]

closing as this not a router issue