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

11 messages · Page 1 of 1 (latest)

sturdy stone
#

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"
  }
Screenshot_2024-03-09_at_7.55.22_PM.png
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

idle latch
#

I think that's an error that appeared in 1.19.3 version of vite cli plugin, the same thing happened to me in #1203801327063408762

#

try downgrading the plugin to 1.19.2 and see if it persists

sturdy stone
#

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

silk hawk
#

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

#

cc @rose sierra

sturdy stone
#

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 @silk hawk

// Create Virtual Routes

const IndexLazyImport = createFileRoute('/')()
📎 vite-project.zip
bold ridge
#

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

sturdy stone
#

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

silk hawk
#

please let us know if there are still issues