New pages 404 unless server is restarted

[ghost]

Environment

---

• Operating System: Windows_NT (Windows 10 latest update)
• Node Version: v18.12.1
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: telemetry, modules, css, hooks, vite
• Runtime Modules: nuxt-icon@0.1.8
• Build Modules: -

---

export default defineNuxtConfig({
  telemetry: false,
  modules: [
    'nuxt-icon'
  ],
  css: [
    'bulma',
  ],
  hooks: {
    'builder:watch': console.log
  },
  vite: {
    server: {
      watch: {
        usePolling: true
      }
    }
  }
})

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0",
    "nuxt-icon": "^0.1.8",
    "sass": "^1.57.0",
    "sass-loader": "10"
  },
  "dependencies": {
    "bulma": "^0.9.4"
  }
}

Reproduction

1. Have this in app.vue : <template><NuxtPage /></template> do not make a "pages" directory yet
2. Start server using yarn dev -o
3. Add pages/hello.vue with <template>Hello world!</template> -- this will work
4. Now add pages/test.vue with <template>Test</template> -- this will 404

Demo:

Describe the bug

New pages require server start, otherwise you get a 404. It breaks the whole point of HMR and productivity. Such a critical issue has been raised (and closed) at least 5 times, over a year without lasting fix.

#13307 (raised Jan 26!)
#13725
#13791
#15045
#15141

Having to stop and start the server takes up to 30 seconds (avg. 20s+) for me on an almost empty project. Please fix.

Additional context

No response

Logs

No response

[danielroe]

The time delay is an upstream issue with bulma: #13824.

I can't reproduce the issue with the steps you have provided.

[ghost]

@danielroe Thanks for your response, Ill try again with fresh install, and this time record it. Hopefully it does not happen. Also thanks for the info on the slowdowns!

[ghost]

@danielroe After spending ages trying to figure out why a new install was working and my near-new install was not, I figured it out, please see the updated steps, and also a demo. Also yes, taking out bulma speeds up the vite warmup to 3s or so.

[jannikegger]

Sadly, I do have the same issue. Reproduced multiple times with a complete new Nuxt project:

Environment

• Operating System: Mac OSX 12.6
• Node Version: v18.10.0
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: npm@8.19.2
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -
• IDE: Webstorm & VS Code

Reproduction

1. npx nuxi init <projectname>
2. npm i
3. npm run dev
4. create pages folder
5. add the following content into app.vue

<script setup lang="ts">
const route = useRoute()
</script>

<template>
  <div>
    <NuxtLoadingIndicator />

    <div>
      Current route: <code>{{ route.path }}</code>
    </div>

    <NuxtPage />
  </div>
</template>

6. Create a index.vue file inside pages folder with the following content

<template>
  <div>
    Index >> <nuxt-link to="/demo">Demo</nuxt-link>
  </div>
</template>

7. create a demo.vue file inside pages folder with the following content

<template>
  <div>
    Demo Page
  </div>
</template>

8. Go to http://localhost:3000or where ever your project is accessible from
9. Index page should be visible
10. clicking on the "Demo" Link will work (side info - the route got registered correctly in the vue dev tools)
11. Reloading now redirects to the 404 error page and not showing the demo page
12. Restart npm run dev and go through steps 8 to 11 should work now without the redirect to the 404 page.

[bastianhilton]

I'm having this issue as well on Nuxt 3.0.0. Every time i add a new page I get the 404 error page saying a page doesn't exist. Only way to resolve it is through restarting the server.