flat-fuchsia

Updating tanstack router causes crash

Update 1.120.5 -> 1.121.2 I updated the deprecated vite plugin import { TanStackRouterVite } from "@tanstack/router-plugin/vite"; -> import { tanstackRouter } from "@tanstack/router-plugin/vite"; plugin usage:

plugins: [
      tanstackRouter({
        target: "react",
        routeFilePrefix: "~",
        autoCodeSplitting: true,
        routeTreeFileFooter: [
          "export type RouteId = Exclude<keyof FileRoutesById, '__root__'>;",
          "export type Route = FileRoutesById[RouteId];",
          "export type RouteTree = typeof routeTree;",
        ],
      }),
      react(),
      reactScan(),
      //...
]

plugins: [
      tanstackRouter({
        target: "react",
        routeFilePrefix: "~",
        autoCodeSplitting: true,
        routeTreeFileFooter: [
          "export type RouteId = Exclude<keyof FileRoutesById, '__root__'>;",
          "export type Route = FileRoutesById[RouteId];",
          "export type RouteTree = typeof routeTree;",
        ],
      }),
      react(),
      reactScan(),
      //...
]

But both cause crashes on startup:

error when starting dev server:
TypeError: Cannot read properties of undefined (reading 'config')
    at PluginContext.buildStart

error when starting dev server:
TypeError: Cannot read properties of undefined (reading 'config')
    at PluginContext.buildStart

19 Replies

other-emerald•6mo ago

You'll need vite v6

flat-fuchsiaOP•6mo ago

that was it, thanks shouldn't this be considered a breaking change?

other-emerald•6mo ago

If truly following semver, yes, as before v5 was permitted. I've raised a PR to correct the peer dep, but maybe safe access to the environment config would be better

flat-fuchsiaOP•6mo ago

uh... still crashing when i run tests (vitest 3.2.3)

other-emerald•6mo ago

same error when running tests?

flat-fuchsiaOP•6mo ago

yes, same error (though everything else works now, dev, build, etc..)

other-emerald•6mo ago

I don't use vitest in our TSR project, sorry. But I suspect it's the same issue, that the environment isn't available in vitest

flat-fuchsiaOP•6mo ago

which environment?

other-emerald•6mo ago

this here: https://github.com/TanStack/router/blob/main/packages/router-plugin/src/core/router-generator-plugin.ts#L77

flat-fuchsiaOP•6mo ago

so it thinks its on the server because of node_env=test?

other-emerald•6mo ago

not quite, it's because vite plugins (like the TSR plugin) now can conditionally do things based on where it intends to be run, this.environment was introduced in v6 I don't know for sure, but I suspect it's also not available in current versions of vitest

flat-fuchsiaOP•6mo ago

kk, guess ill revert the update then

other-emerald•6mo ago

could you raise a bug?

flat-fuchsiaOP•6mo ago

sure hmm... i cant seem to reproduce it on stackblitz with example can you?

stormy-gold•6mo ago

sorry for this regression, support for vite 5 for the router-plugin is being restored in https://github.com/TanStack/router/pull/4420

GitHub

fix: various fixes by schiller-manuel · Pull Request #4420 · TanS...

flat-fuchsiaOP•6mo ago

thank you 🙏 after these fixes (1.121.12), when running tests I get a new error:

Error: The split value for the virtual route "........./vitest-global-setup.ts" was not found.
//...
Serialized Error: { plugin: 'tanstack-router:code-splitter:compile-virtual-file', ......

Error: The split value for the virtual route "........./vitest-global-setup.ts" was not found.
//...
Serialized Error: { plugin: 'tanstack-router:code-splitter:compile-virtual-file', ......

this is what I'm doing in the global setup:

import type { TestProject } from "vitest/node";

import type { Route, RouteTree } from "../routeTree.gen";

export interface TestRoute {
  path: string;
  children: TestRoute[];
}

const getRouteChildren = (route: Route | RouteTree): TestRoute[] => {
  if (!route.children || !Array.isArray(route.children)) {
    return [];
  }

  return route.children.map((childRoute) => {
    const typedChildRoute = childRoute as { options: { path?: string; id: string } };
    if (!typedChildRoute.options.path) {
      // Skip layout routes (like _auth and _authed)
      return {
        path: typedChildRoute.options.id,
        children: getRouteChildren(childRoute as Route),
      };
    }

    return {
      path: typedChildRoute.options.path,
      children: getRouteChildren(childRoute as Route),
    };
  });
};

export default async function setup(project: TestProject) {
  const { routeTree: rootRoute } = await import("../routeTree.gen");

  const children = getRouteChildren(rootRoute);

  project.provide("testRouteTree", {
    path: "__root__",
    children,
  });
}

declare module "vitest" {
  export interface ProvidedContext {
    testRouteTree: TestRoute;
  }
}

import type { TestProject } from "vitest/node";

import type { Route, RouteTree } from "../routeTree.gen";

export interface TestRoute {
  path: string;
  children: TestRoute[];
}

const getRouteChildren = (route: Route | RouteTree): TestRoute[] => {
  if (!route.children || !Array.isArray(route.children)) {
    return [];
  }

  return route.children.map((childRoute) => {
    const typedChildRoute = childRoute as { options: { path?: string; id: string } };
    if (!typedChildRoute.options.path) {
      // Skip layout routes (like _auth and _authed)
      return {
        path: typedChildRoute.options.id,
        children: getRouteChildren(childRoute as Route),
      };
    }

    return {
      path: typedChildRoute.options.path,
      children: getRouteChildren(childRoute as Route),
    };
  });
};

export default async function setup(project: TestProject) {
  const { routeTree: rootRoute } = await import("../routeTree.gen");

  const children = getRouteChildren(rootRoute);

  project.provide("testRouteTree", {
    path: "__root__",
    children,
  });
}

declare module "vitest" {
  export interface ProvidedContext {
    testRouteTree: TestRoute;
  }
}

stormy-gold•6mo ago

could you please provide a complete example repo?

flat-fuchsiaOP•6mo ago

uh... trying to make a minimal reproduction, i actually found out a new issue, its still throwing errors (though different) on dev command when using vite <6: https://stackblitz.com/edit/tanstack-router-reey8fqq?file=package.json,vite.config.js&preset=node

StackBlitz

Router Quickstart File Based Example (duplicated) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

flat-fuchsiaOP•6mo ago

just try running npm run dev should i make a github issue? or have you already made a pr/started fixing it?

Gaming

Programming

Updating tanstack router causes crash

Did you find this page helpful?