fascinating-indigo

File based lazy routes throwing ReferenceError in routeTree.gen file leading to app crash

I am new to Tanstack router, so I followed the quick start guides provided in this document (https://tanstack.com/router/latest/docs/framework/react/quick-start#srcroutesindexlazytsx) on a fresh app created via vite, post making the changes as listed in the page, I tried to run the application using pnpm dev to my surprise I got a bank page. When I opened the console I noticed there was an reference error thrown in routeTree.gen.ts file. package.json

  "dependencies": {
    "@tanstack/react-router": "^1.19.2",
    "@tanstack/router-devtools": "^1.19.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@tanstack/router-vite-plugin": "^1.19.3",
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^7.0.2",
    "@typescript-eslint/parser": "^7.0.2",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.1.4"
  }

  "dependencies": {
    "@tanstack/react-router": "^1.19.2",
    "@tanstack/router-devtools": "^1.19.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@tanstack/router-vite-plugin": "^1.19.3",
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^7.0.2",
    "@typescript-eslint/parser": "^7.0.2",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.1.4"
  }

Quick Start | TanStack Router Docs

If you're feeling impatient and prefer to skip all of our wonderful documentation, here is the bare minimum to get going with TanStack Router using both file-based route generation and code-based route configuration: Using File-Based Route Generation + Vite

9 Replies

other-emerald•2y ago

I think that's an error that appeared in 1.19.3 version of vite cli plugin, the same thing happened to me in #Layouts & folder structure try downgrading the plugin to 1.19.2 and see if it persists

fascinating-indigoOP•2y ago

Yup, it worked. Gosh i was trying to figure out why this happened for the past 2 hours. Thanks @h3llo

rising-crimson•2y ago

can you please provide your project that failed with 1.19.3 so we can analyze it to fix this bug? cc @Sean Cassiere

fascinating-indigoOP•2y ago

Sure, its a fresh app created via vite, pls see the attached zip file. Also it looks like the below declaration was not created inside the routeTree.gen.ts in v1.19.3 it seems which eventually caused the reference error @Manuel Schiller

// Create Virtual Routes

const IndexLazyImport = createFileRoute('/')()

// Create Virtual Routes

const IndexLazyImport = createFileRoute('/')()

vite-project.zip

adverse-sapphire•2y ago

Just came to ask this very question! Thought I was losing my mind! 🙂

fascinating-indigoOP•2y ago

ha ha, well I did lost my mind for couple of hours, till I posted the issue here to findout the solution 😅 @japfohl

rising-crimson•2y ago

we fixed this in https://github.com/TanStack/router/releases/tag/v1.19.5

GitHub

Release v1.19.5 · TanStack/router

Version 1.19.5 - 3/9/2024, 11:36 PM Changes Fix router-generator: incorrect route-tree generation for nested layout routes (#1285) (f855ec1) by Sean Cassiere Packages @tanstack/router-generator@...

rising-crimson•2y ago

please let us know if there are still issues

fascinating-indigoOP•2y ago

hey @Manuel Schiller I just checked with v1.19.5, the issue is resolved. Thank you for the quick turnaround 👍

Gaming

Programming

File based lazy routes throwing ReferenceError in routeTree.gen file leading to app crash

Did you find this page helpful?