Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ERROR] Cannot find name 'definePage' #114

Closed
angelhdzmultimedia opened this issue Jan 7, 2023 · 9 comments
Closed

[ERROR] Cannot find name 'definePage' #114

angelhdzmultimedia opened this issue Jan 7, 2023 · 9 comments
Assignees

Comments

@angelhdzmultimedia
Copy link

angelhdzmultimedia commented Jan 7, 2023

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.

@angelhdzmultimedia
Copy link
Author

angelhdzmultimedia commented Jan 7, 2023

Solved

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

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

Thank you!

@angelhdzmultimedia
Copy link
Author

angelhdzmultimedia commented Jan 7, 2023

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.

@angelhdzmultimedia
Copy link
Author

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
Copy link
Owner

posva commented Jan 7, 2023

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

@posva posva added the question label Jan 7, 2023
@angelhdzmultimedia
Copy link
Author

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.

@angelhdzmultimedia
Copy link
Author

Here is the repro:

https://github.com/angelhdzmultimedia/chat

Copy link
Owner

posva commented Jan 7, 2023

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

@angelhdzmultimedia
Copy link
Author

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.

@posva posva self-assigned this Jan 8, 2023
@posva posva added bug and removed question labels Jan 8, 2023 — with Volta.net
@posva posva closed this as completed in ce70048 Jan 8, 2023
@angelhdzmultimedia
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants