[ERROR] Cannot find name 'definePage'

[angelhdzdev]

Can't get the definePage macro to work to define a route meta. I know I can use the <route> tag, but I prefer using the macro to match Nuxt 3 conventions. Tried to restart the Volar Takeover Mode TypeScript server and VSCode workspace.

Using Vue 3, Quasar with Vite CLI, <script setup>, TypeScript, and typed-router.d.ts correctly configured in tsconfig.json.
All dependencies updated to @latest.

Any tip will be appreciated.

[angelhdzdev]

Solved

Searched in unplugin/vue-router and all the subfolders.
Found it in vue-router/auto.

import {definePage} from 'vue-router/auto'

Thank you!

[angelhdzdev]

Reopened

Oh oh... new error...

C:\Users\AngelHdz\Documents\Programming\TypeScript\projects\chat\client2\node_modules\unplugin-vue-router\dist\vite.js:874
  const definePageNodes = scriptCompiled.scriptSetupAst.map((node) => {   

    ^

TypeError: Cannot read properties of 
undefined (reading 'scriptSetupAst') 
    at extractDefinePageNameAndPath (C:\Users\AngelHdz\Documents\Programming\TypeScript\projects\chat\client2\node_modules\unplugin-vue-router\dist\vite.js:874:42)
    at writeRouteInfoToNode (C:\Users\AngelHdz\Documents\Programming\TypeScript\projects\chat\client2\node_modules\unplugin-vue-router\dist\vite.js:990:7)
    at async addPage (C:\Users\AngelHdz\Documents\Programming\TypeScript\projects\chat\client2\node_modules\unplugin-vue-router\dist\vite.js:1002:5)    at async Promise.all (index 2)   
    at async Promise.all (index 0)   
    at async Object.scanPages (C:\Users\AngelHdz\Documents\Programming\TypeScript\projects\chat\client2\node_modules\unplugin-vue-router\dist\vite.js:964:5)
    at async Promise.all (index 5)   
    at async Object.buildStart (C:\Users\AngelHdz\Documents\Programming\TypeScript\projects\chat\client2\node_modules\vite\dist\node\chunks\dep-689425f3.js:39230:13)
    at async httpServer.listen (C:\Users\AngelHdz\Documents\Programming\TypeScript\projects\chat\client2\node_modules\vite\dist\node\chunks\dep-689425f3.js:60350:21)

Node.js v18.1.0

The error goes away if I delete the definePage call and import.

[angelhdzdev]

Update

I found an example (playground) that uses unplugin-auto-import and added the auto-imports.d.ts with the contents:

export {}
declare global {
  const defineLoader: typeof import('vue-router/auto')['defineLoader']
  const definePage: typeof import('unplugin-vue-router/runtime')['_definePage']
  const onBeforeRouteLeave: typeof import('vue-router/auto')['onBeforeRouteLeave']
  const onBeforeRouteUpdate: typeof import('vue-router/auto')['onBeforeRouteUpdate']
  const useRoute: typeof import('vue-router/auto')['useRoute']
  const useRouter: typeof import('vue-router/auto')['useRouter']
}

The Cannot find name 'definePage' error in my Vue component is gone, but when compiling, the other error shows in the terminal.

[posva]

Do you have a boiled down repro for this one? I couldn't reproduce it

[angelhdzdev]

Do you have a boiled down repro for this one? I couldn't reproduce it

Gonna make one tonight, my apologies.

For now, I can add that using the <route> tag worked right away and my app is working with the NestJS and SocketIO backend. It's a simple chat system with rooms using the Quasar With Vite CLI. The added unplugin-vue-router and vite-plugin-vue-layouts following the guides. Using TypeScript, Vue 3, and Script Setup.
Installed layouts and router as Vite plugin in the quasar.config.js in the vitePlugins array.

Only definePage macro isn't working for me.

[angelhdzdev]

Here is the repro:

https://github.com/angelhdzmultimedia/chat

[posva]

Your repo seems private. Please make sure there is no quasar, nested js or other unrelated framework or library. Using the page structure and the definePage should be enough to reproduce the problem. Otherwise it might be a problem with the other libraries

[angelhdzdev]

Your repo seems private. Please make sure there is no quasar, nested js or other unrelated framework or library. Using the page structure and the definePage should be enough to reproduce the problem. Otherwise it might be a problem with the other libraries

Here https://github.com/angelhdzmultimedia/chat-client-unplugin-vue-router
(now it's public, I am using Github Desktop and the private checkbox is ticked by default, my apologies)

No Quasar, no libs, no backend. Pure vite vue3 typescript project.

[angelhdzdev]

Wow that was fast!!!

Working 100%. Also the import {definePage} from 'vue-router/auto' it's working for the types. Thank you for your kindness, effort, and time.