nuxt: Undefined route in Nuxt layout component in prod build

Environment

- Operating System: `Linux`
- Node Version:     `v16.18.0`
- Nuxt Version:     `3.0.0-rc.13`
- Nitro Version:    `0.6.1`
- Package Manager:  `pnpm@7.15.0`
- Builder:          `vite`
- User Config:      `modules`, `oxyshopNuxt`, `i18n`, `experimental`
- Runtime Modules:  `normalizedModule()`, `normalizedModule()`
- Build Modules:    `-`

Reproduction

Build to prod

Describe the bug

In the dev environment everything works fine, once the application build to production. on the client side Nuxt RC-13 crashes on the error that the route is undefined. https://github.com/nuxt/framework/blob/59d8c51b5bd8d8f7de66f83494d9d39110e43c44/packages/nuxt/src/app/components/layout.ts#L73 On Nuxt RC-12 it works fine.

Additional context

image

Logs

TypeError: Cannot read properties of undefined (reading 'meta')
    at zc.fn (entry.6b774f36.js:78:63198)
    at zc.run (entry.6b774f36.js:1:4282)
    at get value [as value] (entry.6b774f36.js:1:12410)
    at Proxy.<anonymous> (entry.6b774f36.js:78:63258)
    at fl (entry.6b774f36.js:1:15833)
    at St (entry.6b774f36.js:1:49906)
    at zc.V [as fn] (entry.6b774f36.js:1:49994)
    at zc.run (entry.6b774f36.js:1:4282)
    at G.T.update (entry.6b774f36.js:1:50299)
    at G (entry.6b774f36.js:1:50325)
nE @ entry.6b774f36.js:1

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 1
  • Comments: 29 (21 by maintainers)

Most upvoted comments

The issue seems to be that @gtm-support/vue-gtm is pulling in a separate copy of vue-router.

For now you can workaround with:

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  vite: {
    resolve: {
      dedupe: ['vue-router']
    }
  }
})

I am on v4.1.6 since it was released and yet I still face this error on Nuxt edge.

Please do provide a reproduction if that’s the case. This is an upstream issue (not directly caused by Nuxt) but if there’s anything I can do to help resolve this, I will.

Oh well, I spent way too many hours deep inside code just to find out I had to update my vue dependency to at least 3.2.45! The error is gone now.

Does it really work?

@danielroe Confirmed that upgrading to vue-router version 4.1.6 has fixed this issue. 🙏

@danielroe I finally managed to create a reproduction of this infernal bug! https://stackblitz.com/edit/github-ecbwau?file=package.json

Steps:

  1. run $ pnpm install
  2. run $ pnpm run build
  3. run $ node .output/server/index.mjs

I didn’t encounter this issue until upgrading from rc-12 to 1.0.0. In dev and in local build it works fine, but as soon as it is deployed to Netlify I’m hit with the error cannot read properties of undefined (reading 'meta'). The page loads for a split second and then the error is encountered and the page goes white.

Looking at pnpm-lock.yaml, vue router and vue are at the latest versions as above.

@danielroe Any ideas? Could it have something to do with the fact that this project only uses one template, ie the pages folder only contains two files [[slug]].vue and 404.vue? Still strange that it’s only on production in Netlify that it’s occuring.

Have had to revert to rc-12 in the meantime until resolved.

Screen Shot 2022-11-21 at 1 38 02 pm

just upgrate vue-router to 4.1.6! It`s work perfect for me(nuxt 3.0.0)

I didn’t encounter this issue until upgrading from rc-12 to 1.0.0. In dev and in local build it works fine, but as soon as it is deployed to Netlify I’m hit with the error cannot read properties of undefined (reading 'meta'). The page loads for a split second and then the error is encountered and the page goes white. Looking at pnpm-lock.yaml, vue router and vue are at the latest versions as above. @danielroe Any ideas? Could it have something to do with the fact that this project only uses one template, ie the pages folder only contains two files [[slug]].vue and 404.vue? Still strange that it’s only on production in Netlify that it’s occuring. Have had to revert to rc-12 in the meantime until resolved. Screen Shot 2022-11-21 at 1 38 02 pm

Show me your package.json deps list.

I have an observation which might help to narrow it down a bit.
I encountered this issue also when going from rc.12 to ^rc.14 and 1.0.0. It only happened when using pnpm install --shamefully-hoist. Using npm didn’t produce this problem.
The cause of it for me was our internal components library. It was enough for it to be included in package.json of a clean nuxt project. I’d get the error event without importing any part of it. Been trying to make a reproduction, but couldn’t.
Adding auto-install-peers=true to .npmrc solved the issue.

I didn’t encounter this issue until upgrading from rc-12 to 1.0.0. In dev and in local build it works fine, but as soon as it is deployed to Netlify I’m hit with the error cannot read properties of undefined (reading 'meta'). The page loads for a split second and then the error is encountered and the page goes white.

Looking at pnpm-lock.yaml, vue router and vue are at the latest versions as above.

@danielroe Any ideas? Could it have something to do with the fact that this project only uses one template, ie the pages folder only contains two files [[slug]].vue and 404.vue? Still strange that it’s only on production in Netlify that it’s occuring.

Have had to revert to rc-12 in the meantime until resolved.

Screen Shot 2022-11-21 at 1 38 02 pm

For me vue 3.2.45 and vue-router 4.1.6 still throw an error with an undefined route.

Oh well, I spent way too many hours deep inside code just to find out I had to update my vue dependency to at least 3.2.45! The error is gone now.