Undefined route in Nuxt layout component in prod build #15434

misaon · 2022-11-10T14:51:45Z

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

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

The text was updated successfully, but these errors were encountered:

danielroe · 2022-11-10T14:52:03Z

Would you provide a reproduction? 🙏

misaon · 2022-11-10T14:56:53Z

Would you provide a reproduction? 🙏

Unfortunately, it's part of a commercial project.
It happened after we switched from RC-12 to RC-13. We are currently fixing to RC-12, hopefully we can fix the problem.

danielroe · 2022-11-10T15:01:45Z

I'm not asking for your full app, just a minimal reproduction of the issue via https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz.

misaon · 2022-11-10T17:00:06Z

const route falls to undefined in prod

misaon · 2022-11-11T08:51:35Z

Would you provide a reproduction? 🙏

#15443

danielroe · 2022-11-12T14:38:42Z

Would you try upgrading your version of vue-router to 4.1.6 manually?

michealroberts · 2022-11-12T14:42:26Z

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

dargmuesli · 2022-11-13T00:26:43Z

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

danielroe · 2022-11-14T09:53:12Z

@dargmuesli Any chance of a reproduction? 🙏 (The only example I have so far is using 4.1.5.)

dargmuesli · 2022-11-14T22:34:56Z

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.

misaon · 2022-11-14T22:52:51Z

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?

misaon · 2022-11-15T09:08:51Z

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

danielroe · 2022-11-15T09:28:28Z

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.

dargmuesli · 2022-11-15T20:06:22Z

Make sure all your other dependencies are up to date as well, @misaon.
If you're using pnpm that would be a pnpm upgrade --interactive --latest and a pnpm upgrade.

paolooo · 2022-11-16T09:27:33Z

What I did is to resolve this issue is, I deleted my yarn.lock file, node_modules, .output, and .nuxt directories. Then, installed nuxt again.

$ rm -rf node_modules .output .nuxt yarn.lock
$ yarn install
$ yarn build
$ node .output/server/index.mjs

misaon · 2022-11-16T12:06:41Z

Upgrade to RC-14 solved this issue 🙏

MichaelPrecel · 2022-11-21T03:05:40Z

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.

misaon · 2022-11-21T07:29:27Z

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.

Show me your package.json deps list.

littlejon85 · 2022-11-21T09:05:02Z

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.

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.

misaon · 2022-11-21T09:11:26Z

One possible problem could be that one of your deps has a dependency on Vue 2. For example, the presence of the @gtm-support/vue-gtm package in package.json is causing this particular error.

Katerinka28 · 2022-11-21T15:35:05Z

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.

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

MichaelPrecel · 2022-11-21T23:03:55Z

Thanks everyone for your suggestions, a lot of good avenues to explore here. @misaon You could be on the money, I'm using vue-gtag-next, so perhaps that has a Vue 2 dep. I'll try See package below. I'll try some of these solutions and report back.

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@vueuse/core": "^9.1.1",
    "@vueuse/nuxt": "^9.1.1",
    "include-media": "^1.4.10",
    "nuxt": "3.0.0-rc.12",
    "sass": "^1.51.0",
    "sass-loader": "^13.2.0"
  },
  "dependencies": {
    "@nuxtjs/sanity": "1.3.2",
    "@sanity/image-url": "^1.0.1",
    "flickity": "^3.0.0",
    "flickity-as-nav-for": "^3.0.0",
    "lazysizes": "^5.3.2",
    "reset-css": "^5.0.1",
    "vh-check": "^2.0.5",
    "vue-gtag-next": "^1.14.0"
  }
}

victorgarciaesgi · 2023-01-23T18:27:03Z

Hello! I'm still having the error on e2e tests fixtures. Strange thing is on fixture run correctly while the other fails. Exactly like said before, the content appears then disappears with the error.
I'm using @nuxt/test-utils
Repo here: https://github.com/victorgarciaesgi/nuxt-typed-router/tree/v2.1.3
Steps:

Go to test/e2e/complex.spec.ts and decomment all comments
Run pnpm run test

Tried auto-install-peers=true as @littlejon85 said but no luck

victorgarciaesgi · 2023-01-23T18:27:54Z

Also worth noting that I had the same problem with docs/docus, and fixed the problem by switching to yarn. But here even switching to yarn/npm didn't fixed the issue

misaon · 2023-01-30T13:31:58Z

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

Steps:

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

danielroe · 2023-01-30T13:41:03Z

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']
    }
  }
})

misaon added the pending triage label Nov 10, 2022

danielroe added the needs reproduction label Nov 10, 2022

This comment was marked as off-topic.

Sign in to view

This comment was marked as outdated.

Sign in to view

This comment was marked as resolved.

Sign in to view

misaon changed the title ~~Undefined route in Nuxt layout component~~ Undefined route in Nuxt layout component in prod build Nov 10, 2022

danielroe added bug upstream and removed needs reproduction pending triage labels Nov 11, 2022

danielroe mentioned this issue Jan 19, 2023

[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'meta') #15454

Closed

misaon closed this as completed Nov 16, 2022

danielroe added the 3.x label Jan 19, 2023

ninebolt6 mentioned this issue Jan 19, 2023

[RC13] Error on production build when using layouts and vue-router < 4.1.6 #15443

Closed

danielroe transferred this issue from nuxt/framework Jan 19, 2023

misaon reopened this Jan 30, 2023

danielroe self-assigned this Jan 30, 2023

danielroe mentioned this issue Jan 30, 2023

fix(nuxt): dedupe vue-router #18626

Merged

7 tasks

danielroe closed this as completed in #18626 Jan 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Undefined route in Nuxt layout component in prod build #15434

Undefined route in Nuxt layout component in prod build #15434

misaon commented Nov 10, 2022 •

edited

danielroe commented Nov 10, 2022

misaon commented Nov 10, 2022

This comment was marked as off-topic.

danielroe commented Nov 10, 2022

This comment was marked as outdated.

This comment was marked as resolved.

misaon commented Nov 10, 2022

misaon commented Nov 11, 2022

danielroe commented Nov 12, 2022

michealroberts commented Nov 12, 2022

dargmuesli commented Nov 13, 2022

danielroe commented Nov 14, 2022 •

edited

dargmuesli commented Nov 14, 2022 •

edited

misaon commented Nov 14, 2022 •

edited

misaon commented Nov 15, 2022

danielroe commented Nov 15, 2022

dargmuesli commented Nov 15, 2022

paolooo commented Nov 16, 2022

misaon commented Nov 16, 2022

MichaelPrecel commented Nov 21, 2022 •

edited

misaon commented Nov 21, 2022

littlejon85 commented Nov 21, 2022

misaon commented Nov 21, 2022 •

edited

Katerinka28 commented Nov 21, 2022

MichaelPrecel commented Nov 21, 2022

victorgarciaesgi commented Jan 23, 2023

victorgarciaesgi commented Jan 23, 2023

misaon commented Jan 30, 2023 •

edited

danielroe commented Jan 30, 2023

Undefined route in Nuxt layout component in prod build #15434

Undefined route in Nuxt layout component in prod build #15434

Comments

misaon commented Nov 10, 2022 • edited

Environment

Reproduction

Describe the bug

Additional context

Logs

danielroe commented Nov 10, 2022

misaon commented Nov 10, 2022

This comment was marked as off-topic.

danielroe commented Nov 10, 2022

This comment was marked as outdated.

This comment was marked as resolved.

misaon commented Nov 10, 2022

misaon commented Nov 11, 2022

danielroe commented Nov 12, 2022

michealroberts commented Nov 12, 2022

dargmuesli commented Nov 13, 2022

danielroe commented Nov 14, 2022 • edited

dargmuesli commented Nov 14, 2022 • edited

misaon commented Nov 14, 2022 • edited

misaon commented Nov 15, 2022

danielroe commented Nov 15, 2022

dargmuesli commented Nov 15, 2022

paolooo commented Nov 16, 2022

misaon commented Nov 16, 2022

MichaelPrecel commented Nov 21, 2022 • edited

misaon commented Nov 21, 2022

littlejon85 commented Nov 21, 2022

misaon commented Nov 21, 2022 • edited

Katerinka28 commented Nov 21, 2022

MichaelPrecel commented Nov 21, 2022

victorgarciaesgi commented Jan 23, 2023

victorgarciaesgi commented Jan 23, 2023

misaon commented Jan 30, 2023 • edited

danielroe commented Jan 30, 2023

misaon commented Nov 10, 2022 •

edited

danielroe commented Nov 14, 2022 •

edited

dargmuesli commented Nov 14, 2022 •

edited

misaon commented Nov 14, 2022 •

edited

MichaelPrecel commented Nov 21, 2022 •

edited

misaon commented Nov 21, 2022 •

edited

misaon commented Jan 30, 2023 •

edited