correct-apricot

Generated tree file isnt being built with Vite

Im running into this issue where the route tree cant be build with Vite and Rollup. Have anyone else run into this issue? From the output it seems like the file isnt being compiled to js

vite v5.3.0 building for production...
✓ 4 modules transformed.
x Build failed in 35ms
error during build:
src/routeTree.gen.ts (42:41): Unexpected token `string literal (/_auth, "/_auth")`. Expected yield, an identifier, [ or { (Note that you need plugins to import files that are not JavaScript)

40:   getParentRoute: () => DashboardRoute,
41: } as any).lazy(() =>
42:   import('./routes/_dashboard/index.lazy').then((d) => d.Route),

vite v5.3.0 building for production...
✓ 4 modules transformed.
x Build failed in 35ms
error during build:
src/routeTree.gen.ts (42:41): Unexpected token `string literal (/_auth, "/_auth")`. Expected yield, an identifier, [ or { (Note that you need plugins to import files that are not JavaScript)

40:   getParentRoute: () => DashboardRoute,
41: } as any).lazy(() =>
42:   import('./routes/_dashboard/index.lazy').then((d) => d.Route),

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsConfigPaths from "vite-tsconfig-paths";
import basicSsl from "@vitejs/plugin-basic-ssl";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tsConfigPaths(),
    TanStackRouterVite(),
    basicSsl({
    }),
  ],
});

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsConfigPaths from "vite-tsconfig-paths";
import basicSsl from "@vitejs/plugin-basic-ssl";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tsConfigPaths(),
    TanStackRouterVite(),
    basicSsl({
    }),
  ],
});

//tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "allowJs": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    /* Let ESLint handle these */
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,

    /* Paths */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

//tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "allowJs": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    /* Let ESLint handle these */
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,

    /* Paths */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

25 Replies

provincial-silver•2y ago

That'd weird. Maybe you just need to regen the route-tree. Like turn on the dev-server once?

correct-apricotOP•2y ago

I deleted the route-tree but it's still happening

provincial-silver•2y ago

Could you try moving the react-refresh plugin below the TanStack Router plugin and try? Is this project on GitHub? where I can see the source?

correct-apricotOP•2y ago

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsConfigPaths from "vite-tsconfig-paths";
import basicSsl from "@vitejs/plugin-basic-ssl";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    tsConfigPaths(),
    TanStackRouterVite(),
    react(),
    basicSsl({
    }),
  ],
});

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsConfigPaths from "vite-tsconfig-paths";
import basicSsl from "@vitejs/plugin-basic-ssl";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    tsConfigPaths(),
    TanStackRouterVite(),
    react(),
    basicSsl({
    }),
  ],
});

sorry it's closed source the dev server isnt having any problem but the build step is erroring

provincial-silver•2y ago

What does your build script look like?

correct-apricotOP•2y ago

it's just a standard vite build

    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

I can try deleting node_module and rebuild

provincial-silver•2y ago

Can you try this?

{
  "scripts": {
     "build": "tsc && vite build",
  }
}

{
  "scripts": {
     "build": "tsc && vite build",
  }
}

correct-apricotOP•2y ago

> tsc && vite build


♻️  Generating routes...
✅ Processed routes in 141ms
vite v5.3.0 building for production...
✓ 4 modules transformed.
x Build failed in 36ms
error during build:
src/routeTree.gen.ts (42:41): Unexpected token `string literal (/_auth, "/_auth")`. Expected yield, an identifier, [ or { (Note that you need plugins to import files that are not JavaScript)

> tsc && vite build


♻️  Generating routes...
✅ Processed routes in 141ms
vite v5.3.0 building for production...
✓ 4 modules transformed.
x Build failed in 36ms
error during build:
src/routeTree.gen.ts (42:41): Unexpected token `string literal (/_auth, "/_auth")`. Expected yield, an identifier, [ or { (Note that you need plugins to import files that are not JavaScript)

still no

provincial-silver•2y ago

Can you share your package.json and routeTree.gen.ts files

correct-apricotOP•2y ago

message.txt

correct-apricotOP•2y ago

message.txt

provincial-silver•2y ago

I'm honestly kind of stumped... Everything looks to be in order. Could you compare your tsconfig against mine and see if anything stands out to you. https://github.com/SeanCassiere/nv-rental-clone

GitHub

GitHub - SeanCassiere/nv-rental-clone: Navotar with Tailwind and th...

Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.

correct-apricotOP•2y ago

I can try using your ts config and go from there

provincial-silver•2y ago

Yea, give it a shot. Did this just start happening?

correct-apricotOP•2y ago

vite v5.3.0 building for production...
✓ 5 modules transformed.
x Build failed in 37ms
error during build:
src/routeTree.gen.ts (42:41): Unexpected token `string literal (/_auth, "/_auth")`. Expected yield, an identifier, [ or { (Note that you need plugins to import files that are not JavaScript)

vite v5.3.0 building for production...
✓ 5 modules transformed.
x Build failed in 37ms
error during build:
src/routeTree.gen.ts (42:41): Unexpected token `string literal (/_auth, "/_auth")`. Expected yield, an identifier, [ or { (Note that you need plugins to import files that are not JavaScript)

I noticed it when I pushed it to ci I forgot to build the project before hand since tsc didnt return any error basically last night it happens on ci also so it's isnt local to my. machine at least lemme grab the package.json and just clone the project over to a github repo to see if I can reproduce it After I striped the project down to nothing it seems to work now? I think it's something with the name

     ★ routes
      -components
      _dashboard
        -components
         index.lazy.tsx
       __root.tsx
       _dashboard.tsx
       ★ auth.tsx
       ★ login.lazy.tsx
       ★ logout.lazy.tsx

     ★ routes
      -components
      _dashboard
        -components
         index.lazy.tsx
       __root.tsx
       _dashboard.tsx
       ★ auth.tsx
       ★ login.lazy.tsx
       ★ logout.lazy.tsx

here's my component tree the error persists with this tree still I have to go out a bit, I'll continue bisecting the bug later

provincial-silver•2y ago

src/routes
  __root.tsx
  _dashboard.tsx
  _dashboard/
    index.lazy.tsx
    -components/
  auth.tsx
  login.lazy.tsx
  logout.lazy.tsx
  -components/

src/routes
  __root.tsx
  _dashboard.tsx
  _dashboard/
    index.lazy.tsx
    -components/
  auth.tsx
  login.lazy.tsx
  logout.lazy.tsx
  -components/

Just to confirm this is the tree.

correct-apricotOP•2y ago

so I managed to reproduce it with this tree

correct-apricotOP•2y ago

this tree is ok

correct-apricotOP•2y ago

this tree is not

correct-apricotOP•2y ago

lemme push the reproduction onto github, sec

correct-apricotOP•2y ago

@Sean Cassiere https://github.com/ShuviSchwarze/tanstack-router-vite-build.git

GitHub

GitHub - ShuviSchwarze/tanstack-router-vite-build

Contribute to ShuviSchwarze/tanstack-router-vite-build development by creating an account on GitHub.

correct-apricotOP•2y ago

This is my minimum reproducable Update: I updated all my dependencies and it's back to building normally now

dependencies:
- @radix-ui/react-dialog 1.0.5
+ @radix-ui/react-dialog 1.1.0
- @radix-ui/react-dropdown-menu 2.0.6
+ @radix-ui/react-dropdown-menu 2.1.0
- @radix-ui/react-label 2.0.2
+ @radix-ui/react-label 2.1.0
- @radix-ui/react-slot 1.0.2
+ @radix-ui/react-slot 1.1.0
- @radix-ui/react-tabs 1.0.4
+ @radix-ui/react-tabs 1.1.0
- @radix-ui/react-tooltip 1.0.7
+ @radix-ui/react-tooltip 1.1.0
- @tanstack/react-query 5.45.0
+ @tanstack/react-query 5.45.1
- @tanstack/react-router 1.39.4
+ @tanstack/react-router 1.39.8

devDependencies:
- @tanstack/react-query-devtools 5.45.0
+ @tanstack/react-query-devtools 5.45.1
- @tanstack/router-devtools 1.39.4
+ @tanstack/router-devtools 1.39.8
- @tanstack/router-plugin 1.39.5
+ @tanstack/router-plugin 1.39.9
- @types/node 20.14.2
+ @types/node 20.14.7
- @typescript-eslint/eslint-plugin 7.13.0
+ @typescript-eslint/eslint-plugin 7.13.1
- @typescript-eslint/parser 7.13.0
+ @typescript-eslint/parser 7.13.1
- prettier-plugin-tailwindcss 0.6.4
+ prettier-plugin-tailwindcss 0.6.5
- typescript 5.4.5
+ typescript 5.5.2
- vite 5.3.0
+ vite 5.3.1

dependencies:
- @radix-ui/react-dialog 1.0.5
+ @radix-ui/react-dialog 1.1.0
- @radix-ui/react-dropdown-menu 2.0.6
+ @radix-ui/react-dropdown-menu 2.1.0
- @radix-ui/react-label 2.0.2
+ @radix-ui/react-label 2.1.0
- @radix-ui/react-slot 1.0.2
+ @radix-ui/react-slot 1.1.0
- @radix-ui/react-tabs 1.0.4
+ @radix-ui/react-tabs 1.1.0
- @radix-ui/react-tooltip 1.0.7
+ @radix-ui/react-tooltip 1.1.0
- @tanstack/react-query 5.45.0
+ @tanstack/react-query 5.45.1
- @tanstack/react-router 1.39.4
+ @tanstack/react-router 1.39.8

devDependencies:
- @tanstack/react-query-devtools 5.45.0
+ @tanstack/react-query-devtools 5.45.1
- @tanstack/router-devtools 1.39.4
+ @tanstack/router-devtools 1.39.8
- @tanstack/router-plugin 1.39.5
+ @tanstack/router-plugin 1.39.9
- @types/node 20.14.2
+ @types/node 20.14.7
- @typescript-eslint/eslint-plugin 7.13.0
+ @typescript-eslint/eslint-plugin 7.13.1
- @typescript-eslint/parser 7.13.0
+ @typescript-eslint/parser 7.13.1
- prettier-plugin-tailwindcss 0.6.4
+ prettier-plugin-tailwindcss 0.6.5
- typescript 5.4.5
+ typescript 5.5.2
- vite 5.3.0
+ vite 5.3.1

something was fixed between here and there so the problem is resolved. The version on my github is still the bugged version if anyone is interested in looking into it

provincial-silver•2y ago

Thats so weird... Nothing really changed on our side, that'd break route generation. Maybe just something with vite 🤷🏼

correct-apricotOP•2y ago

I believe it was related to either of these pr https://github.com/vitejs/vite/pull/17472 https://github.com/vitejs/vite/pull/17479

GitHub

fix(build): handle preload treeshaking for commas by bluwy · Pull R...

Description fix #17466 We didn't handle the case for syntax like this. const foo = (await import('foo')).foo, bar = ... The trailing comma was incorrectly captured by the regex. I updat...

GitHub

fix(build): handle preload treeshaking for braces by bluwy · Pull R...

Description fix #17478 Handle the cases shown in the issue above. The third part of the regex was to lax to support import(...).then(function ({ ... }) so I tighten it up so it's not too greedy...

provincial-silver•2y ago

That's weird since I didn't notice this in my personal repo... Then again maybe it had to do with how using the .lazy syntax worked 🤔 I've been using the experimental.enableCodeSplitting flag, so it likely was something I didn't see.

Gaming

Programming

Generated tree file isnt being built with Vite

Did you find this page helpful?