NuxtPage doesn`t work in Nuxt 3.7.3

[maksimdrosdov]

Environment

`------------------------------

• Operating System: Darwin
• Node Version: v19.9.0
• Nuxt Version: 3.7.3
• CLI Version: 3.8.3
• Nitro Version: 2.6.3
• Package Manager: npm@9.8.1
• Builder: -
• User Config: experimental, runtimeConfig, app, dev, debug, telemetry, css, plugins, modules, tailwindcss, image, imports, vue, vite
• Runtime Modules: @nuxtjs/tailwindcss@6.8.0, @pinia/nuxt@0.4.11, nuxt-svgo@0.0.3, @nuxt/image-edge@1.0.0-rc.2-28244125.e6e72be, @nuxtjs/device@3.1.0
• Build Modules: -

---

👉 Report an issue: https://github.com/nuxt/nuxt/issues/new 5:33:40 PM

👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new

👉 Read documentation: https://nuxt.com
`

Reproduction

<NuxtPage :page-key="shop-${shop.slug}" />

Describe the bug

After updating to version 3.7.3 NuxtPage stopped working in the entire project

Uncaught (in promise) Error: Page Not Found
    at createError (index.mjs?v=2a803633:78:15)
    at createError (null:31:16)
    at index.vue:37:11

Additional context

No response

Logs

No response

[warflash]

Would you be able to provide a reproduction? 🙏

I tried a to setup a quick example based on your description but the :page-key prop and NuxtPage in general worked fine for me there

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[maksimdrosdov]

@danielroe sent

[maksimdrosdov]

Would you be able to provide a reproduction? 🙏

I tried a to setup a quick example based on your description but the :page-key prop and NuxtPage in general worked fine for me there

my structrure

and the code highlight appeared

[serzz1990]

It doesn`t work in Nuxt 3.7.2 too

[bksubramanyarao]

I had the same problem so here's what I did

1. I first created a blank layout
2. Created a new page and added the blank layout
3. Than tested, it was working fine
4. Then I thought it must be something to do with middleware then I disabled all the middlewares
5. But still I had this problem
6. So finally I was able to identify the problem, definePageMeta
7. I need to add proper name to definePageMeta
8. And this fixed all my issues
9. I hope this helps

[KamilBeda]

@danielroe Here is the reproduction of the issue:
Nuxt 3.7.3 (bugged) https://stackblitz.com/edit/github-wym2sa?file=app.vue
Nuxt 3.7.0 (working properly) https://stackblitz.com/edit/github-yk3aog?file=app.vue

[TartanLeGrand]

Hello, we have the same bug but with the layouts. When we change the page and the layout we dont change the page. We need to force reload on the good url for change the layout and get the new page.

[maksimdrosdov]

@danielroe there is a solution?

[Tumselass]

Hello,
I suspect this might also be the cause of the bug I am experiencing after upgrading from v.3.7.1

After updating from v.3.7.1 my index.vue page witch has a component does not render or load data when navigating to a nested page. I am loading some data in users/index.vue and passing this data to the component as a prop. This worked fine in v.3.7.1, but the props are undefined in v.3.7.3.

v.3.7.1 (working) => https://stackblitz.com/edit/nuxt-starter-m5rkvz?file=pages%2Fusers%2Findex.vue
v.3.7.3 (bugged) => https://stackblitz.com/edit/github-t75rcc?file=pages%2Fusers%2Findex.vue

In version v.3.7.1 navigating to users/all would also render any content inside the users/index.vue file as it contains a component.

In v3.7.3 navigating to users/all does not render the contents of users/index.vue and does not care if the component is present or not. It only renders the contents of all.vue.

[TartanLeGrand]

Hello it's not fix for layouts.

[KamilBeda]

@TartanLeGrand Do you use setPageLayout function to change your layouts?
https://nuxt.com/docs/guide/directory-structure/layouts#changing-the-layout-dynamically

[TartanLeGrand]

I am encountering an issue where I don't want to alter the layout of my current page, but rather change it when navigating to a new page. I am transitioning from the default layout to a custom layout using definePageMeta. The first page employs the default layout, and the second one uses the custom layout. However, when I switch from the first page to the second page, the layout doesn’t switch. Here is my directory structure:

pages/
  - index.vue
  custom
    - index.vue

[danielroe]

If you're having an issue with layouts, would you perhaps open a new issue with a reproduction? The root cause of this one was incorrectly nesting child routes, and not related to layouts.

[KamilBeda]

@TartanLeGrand look here - https://stackblitz.com/edit/github-4tumnt?file=pages%2Fcustom%2Findex.vue
Layouts work as expected

[Jorgagu]

Hi @KamilBeda and @danielroe,

Thanks for your quick replies! With @TartanLeGrand, we figured out the issue in our project. It turns out, the Headless UI Dialog component was causing the problem when switching pages with a different layout.

Here's the comment that helped us pinpoint the issue: tailwindlabs/headlessui#1496 (comment)

[lafllamme]

Hello @danielroe,

I've encountered a persistent issue while setting up Nuxt for several e-commerce and media streaming projects. This challenge arises across various environments, including Docker, Bun (as our Node.js runtime), and Nuxt, tested on macOS, Linux, Windows, and WSL 2.0 setups. Initially, I suspected Docker might be the culprit since I used docker-compose to streamline our development setup, aiming to mitigate dependency-related setup issues. However, my investigations have led me to reconsider.

The issues manifest in two main areas:

Page Views: Components created within the /pages directory behave as expected as components but fail to serve as pages, resulting in a 404 error. Temporarily, restarting the development server mitigates this issue, but it's far from a practical solution.

Server Components: Similarly, API routes defined under /server don't reflect changes until after a server restart. This necessitates frequent recompilation and server restarts upon any modification, which significantly hampers our development workflow.

Our stack includes Headless UI, UNOcss, and various Tailwind presets. In an attempt to isolate the issue, I transitioned from a Docker-based setup to a local development environment across Windows, macOS, and Linux Mint 21.3 Cinnamon, suspecting OS-related discrepancies might be at play. However, this change did not resolve the issues.

Further experimentation led me to believe the issue might stem from our package manager. However, substituting Bun with npm, pnpm, and Yarn yielded no difference. Starting a new project with the latest version of Nuxt did not eliminate the issues either. Interestingly, issue #2 behaves slightly differently in a local setup; after the initial server restart, subsequent API route changes under /server are recognized without needing further restarts, offering a temporary workaround.

Upon closer examination, it seems issue #1 is intricately linked to our layout logic. Our strategy involves a singular app.vue that incorporates NuxtPage and NuxtLayout, along with a custom layout comprising basic components like headers, footers, and a slot. Integrating new or updated routes from /pages into our header component (which utilizes NuxtLink) triggers the 404 errors, whereas directly using routes within page components like index.vue does not cause any issues.

To summarize, the root cause appears to be unrelated to the package manager, operating system, or Docker setup; instead, it hinges on how layout management is handled within Nuxt. This revelation steers us away from incorporating such logic within layouts, despite its appeal.

Regarding issue #2, I have yet to find a workaround for recognizing file changes within Docker (e.g., /api/example.ts) without a complete server restart.

I hope this detailed account aids in diagnosing and addressing these concerns. Thank you for your attention to these matters.