N
Nuxt•3w ago
Usopp

Hot-Refresh end on white-screen

I don't understand, but it suddenly started happening. After I edit my code hot reload happens and then my screen turn white. I already checked out on git history where this didnt use to happen. I'm not sure whats happening or what I'm doing wrong.
3 Replies
kapa.ai
kapa.ai•3w ago
Hi @Usopp. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're experiencing issues with hot reload in Nuxt where your screen turns white after code edits. This is a known issue that has been reported by several users. Based on the knowledge sources, there are a few potential causes and solutions: Possible Causes 1. Recent Nuxt Version Changes: There appears to be a regression in HMR behavior starting from Nuxt 3.15.0 that causes full page refreshes instead of proper hot module replacement GitHub Issue #30623. 2. Components in Pages Directory: If you have components inside your pages directory that aren't actual pages, this can cause HMR issues with full page reloads GitHub Issue #31313. 3. Devtools and Output Folder: One user reported that a combination of having devtools enabled and the existence of .output/server/node_modules folder can cause similar issues GitHub Issue #12376. Potential Solutions 1. Configure Pages Pattern: You can use the pages.pattern configuration to exclude certain files from being treated as pages: 
// nuxt.config.ts
export default defineNuxtConfig({
  pages: {
    pattern: ['**/[a-z]*.vue', '!**/*Component*.vue']
  }
})
// nuxt.config.ts
export default defineNuxtConfig({
  pages: {
    pattern: ['**/[a-z]*.vue', '!**/*Component*.vue']
  }
})
This solution was confirmed to work by a user experiencing similar issues GitHub Issue #31313. 2. Disable Devtools: Try disabling devtools via devtools: { enabled: false } in your Nuxt config. 3. Delete Output Folder: Try deleting the .output/server/node_modules folder if it exists. 4. Check Component Naming: One user reported that changing component naming from PascalCase (like MyComponentOne) to lowercase (Mycomponentone) fixed their HMR issues Stack Overflow #78760898. If you're on Windows, note that HMR performance can be significantly slower, and using WSL (Windows Subsystem for Linux) with Ubuntu might provide a better development experience. Let me know if any of these solutions help with your white screen issue! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@329410068447625220> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Usopp
UsoppOP•3w ago
Already tried this things. It just started happening today. I don’t understand why

Did you find this page helpful?