T
TanStack•15mo ago
deep-jade

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
rival-black
rival-black•15mo ago
That'd weird. Maybe you just need to regen the route-tree. Like turn on the dev-server once?
deep-jade
deep-jadeOP•15mo ago
I deleted the route-tree but it's still happening
rival-black
rival-black•15mo 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?
deep-jade
deep-jadeOP•15mo 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
rival-black
rival-black•15mo ago
What does your build script look like?
deep-jade
deep-jadeOP•15mo 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
rival-black
rival-black•15mo ago
Can you try this? 
{
  "scripts": {
     "build": "tsc && vite build",
  }
}
{
  "scripts": {
     "build": "tsc && vite build",
  }
}
deep-jade
deep-jadeOP•15mo 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
rival-black
rival-black•15mo ago
Can you share your package.json and routeTree.gen.ts files
deep-jade
deep-jadeOP•15mo ago
deep-jade
deep-jadeOP•15mo ago
rival-black
rival-black•15mo 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.
deep-jade
deep-jadeOP•15mo ago
I can try using your ts config and go from there
rival-black
rival-black•15mo ago
Yea, give it a shot. Did this just start happening?
deep-jade
deep-jadeOP•15mo 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
rival-black
rival-black•15mo 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.
deep-jade
deep-jadeOP•15mo ago
so I managed to reproduce it with this tree
deep-jade
deep-jadeOP•15mo ago
this tree is ok
No description
deep-jade
deep-jadeOP•15mo ago
this tree is not
No description
deep-jade
deep-jadeOP•15mo ago
lemme push the reproduction onto github, sec
deep-jade
deep-jadeOP•15mo 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.
deep-jade
deep-jadeOP•15mo 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
rival-black
rival-black•15mo ago
Thats so weird... Nothing really changed on our side, that'd break route generation. Maybe just something with vite 🤷🏼
deep-jade
deep-jadeOP•15mo 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...
rival-black
rival-black•15mo 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.

Did you find this page helpful?