[worker] definePageMeta is not defined

[Moskovskiy]

Environment

• Operating System: Darwin
• Node Version: v16.13.1
• Nuxt Version: 3.0.0-27385496.7a1cf62
• Package Manager: [email protected]
• Bundler: Vite
• User Config: head, css, build
• Runtime Modules: -
• Build Modules: -

Reproduction

https://codesandbox.io/s/hardcore-grass-965dh?file=/pages/index.vue

Describe the bug

Instructions from official Nuxt3 tutorial can't be executed

Additional context

Check out this topic: https://github.com/nuxt/framework/discussions/2770

Any of flows:

1. Having 'pages' folder and no lock.json/node_modules -> installing -> running (after clone)
2. Having 'pages' folder, deleting lock.json/node_modules -> installing -> running
3. Having no pages folder (e.g no vue-router)
   will result in lack of definePageMeta

In this example I use definePageMeta for middleware, but it doesn't depend on it (this is not the source of the error)
I do get the following warning though:

[Vue warn]: Unhandled error during execution of setup function
at <Index onVnodeUnmounted=fn ref=Ref< undefined > key="/some_page" >
definePageMeta is not defined
at setup (file://./.nuxt/dist/server/server.mjs:11102:1)

Logs

ERROR  [worker] definePageMeta is not defined                                                                          

  at setup (.nuxt/dist/server/server.mjs:11102:1)
  at _sfc_main.setup (.nuxt/dist/server/server.mjs:11491:23)
  at callWithErrorHandling (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6621:22)
  at setupStatefulComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6247:29)
  at setupComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6203:11)
  at renderComponentVNode (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)
  at renderVNode (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
  at renderVNode (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:310:17)
  at renderComponentSubTree (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:269:13)
  at renderComponentVNode (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:214:16)

[Moskovskiy]

Plausible solution is listed in this answer: https://github.com/nuxt/framework/discussions/2770#discussioncomment-2005938, yet I was not able to execute it on nuxt3:latest

[Oldwo1f]

For me it with Layout.
<script setup> definePageMeta({ layout: "secondary" });

and i get the following error in chrome console

client.js?06a0:101 ReferenceError: definePageMeta is not defined at __sfc_main.setup (_id.vue?21cd:27) at mergedSetupFn (vue-composition-api.mjs?ed09:2118) at eval (vue-composition-api.mjs?ed09:1930) at activateCurrentInstance (vue-composition-api.mjs?ed09:1845) at initSetup (vue-composition-api.mjs?ed09:1928) at VueComponent.wrappedData (vue-composition-api.mjs?ed09:1911) at getData (vue.runtime.esm.js?2b0e:4761) at initData (vue.runtime.esm.js?2b0e:4717) at initState (vue.runtime.esm.js?2b0e:4655) at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5020)

[franzus5]

@Moskovskiy #13285 same problem here, I guess

[danielroe]

This codesandbox is working for me as far as the definePageMeta is not defined error - though note that codesandbox seems to be a bit glitchy right now with the CF protection it has in place.

Example working stackblitz

@Oldwo1f - definePageMeta won't work in anywhere but in pages/ - it's tightly coupled to Vue Router. And it's also not a feature usable in Nuxt Bridge.

If anyone else is experiencing this issue, would you prepare a reproduction?

[Moskovskiy]

Apparently this has to do something with the following warning

Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
I'm currently investigating it

(manual installation does nothing)

[Oldwo1f]

Ok i see. I am indeed using nuxt bridge.
Is there any work around to change page meta like pageTransition or layout
Note that i am now using the <script setup></script>

[Oldwo1f]

hi there. i am back to this topic.

I really need to use more than one layout on my nuxt-bridge app.

Since definePageMeta is not working in nuxt bridge, I wonder if anyone have a work around.

[Oldwo1f]

Reproduction is kinda easy to create.

• create a new nuxt-bridge app by following the documentation.
• create a new page in the page folder and copy this inside the file.

<template>
<div id="background">
  <p>HEY</p>
</div>
</template>

<script setup>

 definePageMeta({
  layout: "secondary",
});
</script>

• open the app on the browser and look in the console. You will see definePageMeta is not defined

[danielroe]

@Oldwo1f In Nuxt Bridge, you still set the layout the same way you always have. You can create a second script block just to do this.

See https://github.com/antfu/unplugin-vue2-script-setup#component-meta

[danielroe]

@Moskovskiy I can't replicate even with the codesandbox - it appears to be working fine. Would you update the reproduction so it fails? Or create a GitHub repository and share the code with me?

I would suggest deleting your node_modules/.vite and node_modules/.cache folders. Also try upgrading with npx nuxi upgrade --force.

[Oldwo1f]

@Oldwo1f In Nuxt Bridge, you still set the layout the same way you always have. You can create a second script block just to do this.

This is working like a charm.
Thank you very much budy

[eden]

I would suggest deleting your node_modules/.vite and node_modules/.cache folders. Also try upgrading with npx nuxi upgrade --force.

I encountered this issue in my project, but completely removing node_modules and reinstalling from NPM from scratch fixed everything.

[danielroe]

I'm going to close this issue. We've implemented a helper in Nuxi to clear the vite cache (which was the likely culprit) automatically on upgrade.

If anyone experiences this in future, even after trying the steps above, please create a new issue with a reproduction.

[vitaly-petras]

I had same problem and searched a lot. Somewhere is written definePageMeta is only nuxt3 feature and not supported for nuxt bridge. But then i found this link and i get i to work! U have to add macros to bridge setup:

bridge: {
    nitro: true,
    macros: {
      pageMeta: true
    }
  },

and after this its working for me :)

PS - make sure u have latest bridge version