#Hot-Refresh end on white-screen

5 messages · Page 1 of 1 (latest)

regal hawk
#

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.

olive sundialBOT
#

Hi @regal hawk. 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']
  }
})

This solution was confirmed to work by a user experiencing similar issues GitHub Issue #31313.

  1. Disable Devtools: Try disabling devtools via devtools: { enabled: false } in your Nuxt config.

  2. Delete Output Folder: Try deleting the .output/server/node_modules folder if it exists.

#
  1. 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:

#

@regal hawk Kapa.ai is still learning and improving, please let me know how I did by reacting below.