ReferenceError: Cannot access '__vite_ssr_import_2__' before initialization

[ulrichstark]

Which project does this relate to?

Start

Describe the bug

When starting our tanstack start application in development environment, we sometimes get the following error in the terminal:

ReferenceError: Cannot access '__vite_ssr_import_2__' before initialization
    at Module.getRouter (/Users/ulrichstark/Desktop/tanstack-vite-cannot-access-vite-ssr-import-before-initalization/src/router.tsx:7:9)
    ... 2 lines matching cause stack trace ...
    at async eval (/Users/ulrichstark/Desktop/tanstack-vite-cannot-access-vite-ssr-import-before-initalization/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:243:32) {
  cause: ReferenceError: Cannot access '__vite_ssr_import_2__' before initialization
      at Module.getRouter (/Users/ulrichstark/Desktop/tanstack-vite-cannot-access-vite-ssr-import-before-initalization/src/router.tsx:7:9)
      at getRouter (/Users/ulrichstark/Desktop/tanstack-vite-cannot-access-vite-ssr-import-before-initalization/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:123:55)
      at async handleServerRoutes (/Users/ulrichstark/Desktop/tanstack-vite-cannot-access-vite-ssr-import-before-initalization/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:358:18)
      at async eval (/Users/ulrichstark/Desktop/tanstack-vite-cannot-access-vite-ssr-import-before-initalization/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:243:32),
  status: 500,
  statusText: undefined,
  headers: undefined,
  data: undefined,
  body: undefined,
  unhandled: true
}

And the opened application in the browser only shows:

{"status":500,"unhandled":true,"message":"HTTPError"}

When reloading the page, the error goes away and our application is shown.

Your Example Website or App

https://github.com/ulrichstark/tanstack-vite-cannot-access-vite-ssr-import-before-initalization

Steps to Reproduce the Bug or Issue

1. Clone https://github.com/ulrichstark/tanstack-vite-cannot-access-vite-ssr-import-before-initalization
2. Go into folder
3. npm install
4. Run npx vite --force
5. Wait a few seconds
6. If error isn't visible, stop vite and try again starting from step 4

Expected behavior

No error

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.133.34
• OS: macOS
• Browser: Chrome
• Browser Version: 141.0.7390.123
• Bundler: Vite
• Bundler Version: 7.1.12

Additional context

Don't mind the funky reproduction project. It's a product of hours deleting stuff in our project to condense it down to the minimal amount of code that triggers this issue. I hope you can reproduce it on your side. I'm not sure what is causing the issue because it seems to be gone when I delete more relevant code from the project. It's most probably something with my ErrorComponent and its server function which is used as defaultErrorComponent:

import { createServerFn } from "@tanstack/react-start";
import { useEffect } from "react";
import { getCookies } from "@tanstack/react-start/server";
import { House } from "lucide-react";

const reportErrorToServer = createServerFn().handler(() => {
    getCookies();
});

export function ErrorComponent() {
    useEffect(() => {
        reportErrorToServer();
    }, []);

    return <House />;
}

[nickwang0808]

I'm actually stuck with the error and unsure how to get past it

[ulrichstark]

I'm actually stuck with the error and unsure how to get past it

Then it's probably a different issue, because this vite related error is very generic and common and can be the product of a few issues.

[flodaniel]

Also facing the same issue. I believe it is due to a circular dependency between router.tsx importing routeTree, and routeTree.gen imports router.tsx

router-->routeTree->router

[kopdigitaal]

We also have the same issue, any ideas on how to fix this issue?

[schiller-manuel]

@flodaniel @kopdigitaal do you only have this issue once or does it persist?

[flodaniel]

Me and my colleagues have it frequently whenever we start the project initially. It self-resolves, so if we just wait usually at after a minute or so and the project runs.

[schiller-manuel]

whenever we start the project initially

what does this mean? only the first time you run the vite dev server after cloning the repo?

[flodaniel]

Sorry no, it happens again and again everytime we start the vite dev server. However from my recollection it does not happen every time but pretty frequently.

[schiller-manuel]

@flodaniel would you be able to provide a reproducer for this? the above reproducer only shows this once

[flodaniel]

I am working on another repro and will see if it also occurs there.

[checkerschaf]

@schiller-manuel I'm getting this error every time I start the dev server once.

It happens to me when two calls hit the dev server at the same time and the first one is not finished yet.

This also applies when running my E2E tests locally. That's why I have to make a dummy call to the dev server first, wait ~5 seconds and then start the concurrent tests. It's not a deal breaker but quite annoying to work with.

Unfortunately I don't have time at the moment to create reproducer but I thought these details might help pinpoint the issue.

[juliomuhlbauer]

This is happening for me too

[mackattack3k]

For me the issue was that in a file with createServerOnlyFn I had an import from a .tsx component. Not the component itself but merely a type.

I think this caused a circular dependency sure, but also trying to parse tsx as it was in the same file.

[schiller-manuel]

@mackattack3k can you show this in a reproducer project?

[nicksrandall]

I'm also hitting this error, and I believe it's because we have a circular dependency between router.tsx and routeTree.gen.ts. I'm not certain, though.

[CarlosZiegler]

Got same error @schiller-manuel

And this error come in like src/router.tsx:15:3 that is exact line to routeTree :

I think is related of circular dependency mentioned above from @nicksrandall and @flodaniel

[Kevinminh]

Also having this error.

[moncapitaine]

I'm experiencing a very similar issue after upgrading from 1.132.6 to 1.140.0.

Error

TypeError: (0 , __vite_ssr_import_10__.useAutomationActions) is not a function
    at Module.AutomationMenu (file:///path/to/app/src/components/automations/automation-menu.tsx:40:62)

The dev server crashes completely and requires a restart.

Versions

• Working: @tanstack/react-router 1.132.6, @tanstack/react-start 1.132.6
• Broken: @tanstack/react-router 1.140.0, @tanstack/react-start 1.140.0

Pattern

The failing code is a custom hook in a separate file:

// automation-menu.tsx
import { useAutomationActions } from './use-automation-actions'

export const AutomationMenu = () => {
  const { deleteAutomation } = useAutomationActions() // crashes here
}

// use-automation-actions.ts
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useNavigate } from '@tanstack/react-router'

export const useAutomationActions = () => {
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  // ... returns mutation handlers
}

Reproduction context

The issue happens during E2E tests with Playwright when multiple concurrent requests hit the dev server. It's intermittent - doesn't happen 100% of the time, but very common under concurrent load.

Reverting to 1.132.6 completely resolves the issue. I've cleared all caches (node_modules/.vite, .vinxi, turbo cache) and the issue persists with 1.140.0.

Environment

• OS: Linux (DevContainer)
• Node.js: 22.x
• Vite: 6.x

[schiller-manuel]

@moncapitaine can you share a complete project that reproduces this?

[amserra]

Had the same issue. Like @moncapitaine , I was using versions 1.140.0. With version 1.132.6 it works.

[schiller-manuel]

@amserra can you share a complete project that reproduces this?

[kno-raziel]

Im also experiencing this issue,

[vite] connected.
ReferenceError: Cannot access '__vite_ssr_import_6__' before initialization
    at router (rootFolder/packages/app/src/router.tsx:16:22)
    ... 3 lines matching cause stack trace ...
    at async eval (rootFolder/node_modules/.pnpm/@[email protected]_c
[email protected][email protected]_/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:223:34) {
  cause: ReferenceError: Cannot access '__vite_ssr_import_6__' before initialization
      at router (rootFolder/packages/app/src/router.tsx:16:22)
      at getRouter (rootFolder/node_modules/.pnpm/@[email protected]_
[email protected][email protected]_/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:108:57)
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
      at async handleServerRoutes (rootFolder/node_modules/.pnpm/@tanstack+start-serve
[email protected][email protected][email protected]_/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:348:18)
      at async eval (rootFolder/node_modules/.pnpm/@[email protected]
[email protected][email protected]_/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:223:34),
  status: 500,
  statusText: undefined,
  headers: undefined,
  data: undefined,
  body: undefined,
  unhandled: true
}

It happens during the first load of the app. After that I havent seen it.

"@tanstack/react-devtools": "^0.8.4",
"@tanstack/react-query": "^5.90.12",
"@tanstack/react-router": "^1.140.5",
"@tanstack/react-router-devtools": "^1.140.5",
"@tanstack/react-router-ssr-query": "^1.140.5",
"@tanstack/react-start": "^1.140.5",
"@tanstack/router-plugin": "^1.140.5",
"@tanstack/zod-adapter": "^1.141.0",

[Flusinerd]

Maybe this is related. I am getting a similar error when HMR, but its not breaking the dev server:

1:51:32 PM [vite] (ssr) page reload src/hooks/use-file-upload.ts
TypeError: (0 , __vite_ssr_import_0__.createStartHandler) is not a function
    at /Users/jan/Dev/m-copilot/frontend/node_modules/@tanstack/react-start/dist/plugin/default-entry/server.ts:8:15
    at ESModulesEvaluator.runInlinedModule (file:///Users/jan/Dev/m-copilot/frontend/node_modules/vite/dist/node/module-runner.js:913:3)
    at ModuleRunner.directRequest (file:///Users/jan/Dev/m-copilot/frontend/node_modules/vite/dist/node/module-runner.js:1146:59)
    at ModuleRunner.cachedRequest (file:///Users/jan/Dev/m-copilot/frontend/node_modules/vite/dist/node/module-runner.js:1053:73)
    at ModuleRunner.import (file:///Users/jan/Dev/m-copilot/frontend/node_modules/vite/dist/node/module-runner.js:1014:10)
    at EnvRunner.reload (file:///Users/jan/Dev/m-copilot/frontend/node_modules/nitro/dist/runtime/internal/vite/dev-worker.mjs:49:20)
    at async Promise.all (index 1)
    at reload (file:///Users/jan/Dev/m-copilot/frontend/node_modules/nitro/dist/runtime/internal/vite/dev-worker.mjs:163:5)
    at MessagePort.<anonymous> (file:///Users/jan/Dev/m-copilot/frontend/node_modules/nitro/dist/runtime/internal/vite/dev-worker.mjs:197:7)

import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import { devtools } from '@tanstack/devtools-vite'
import { nitro } from 'nitro/vite'

export default defineConfig({
  plugins: [
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    devtools(),
    tailwindcss(),
    tanstackStart(),
    viteReact({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
    nitro(),
  ],
  server: {
    allowedHosts: ['some-domain.local'],
  },
})

"nitro": "latest",
"@tanstack/match-sorter-utils": "8.19.4",
"@tanstack/react-devtools": "0.8.3",
"@tanstack/react-query": "5.90.12 ",
"@tanstack/react-query-devtools": "5.91.1 ",
"@tanstack/react-router": "1.141.4",
"@tanstack/react-router-devtools": "1.141.4",
"@tanstack/react-router-ssr-query": "1.141.4",
"@tanstack/react-start": "1.141.5",
"@tanstack/react-table": "8.21.3",
"@tanstack/router-plugin": "1.141.5"

"@tanstack/devtools-vite": "0.3.12",
"vite": "7.3.0",
"vitest": "4.0.15",