In Dev, New Pages Render a Blank Page Until You Restart The Server

[samuglz]

Environment

Nuxt CLI v3.0.0-27386975.6e06d2b
Nuxt project info:

---

• Operating System: Darwin
• Node Version: v17.2.0
• Nuxt Version: 3.0.0-27386975.6e06d2b
• Package Manager: npm@8.3.0
• Bundler: Vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

1. npm run dev
2. create a new file in /pages
3. fill in the new page with content
4. go to the new route in your browser, a blank page will be rendered
5. stop/start dev and page works

Describe the bug

When running Nuxt 3 in dev mode, if you create a new page it will rendered in your browser a blank page until you stop/start your dev server.

Additional context

No response

Logs

Browser Logs:
- vue-router.esm-bundler.js?v=ed3bc494:72 [Vue Router warn]: No match found for location with path "/posts"

- [Vue warn]: Hydration node mismatch:
  Client vnode: Symbol(Comment) 
  Server rendered DOM: <!--[--> (start of fragment) 
  at < RouterView > 
  at < NuxtPage > 
  at < App > 
  at < NuxtRoot >

- Hydration completed but contains mismatches.

[doomspec]

I am also facing this problem and wondering whether this is a problem of Nuxt3 or Vite.

[jonkri]

This still doesn't work for me, even with v3.0.0-rc.2. I add a pages component, navigate to it and get a 404. However, it works I restart npm run dev.

[sefacicekli]

Still doesn't work with 3.0.0-rc.12

[danielroe]

Believe it or not, it's a different, but similar, issue, which should be resolved by nuxt/framework#8389