Nuxt•5mo ago

HMR issues - performs full page reload and causes errors.

Hi I have been debugging for ages now, and to be honest giving up as to what it can be.. i would love if someone has any good debugging ways to maybe help me trace down the cause. After adding a new package, my HMR is throwing random errors. I have tried removing the package and reverting back, but it's still an issue. It works in a new project, making me think it's to do with a package/plugin, or some error in my code. Worth mentioning that the project has been working for years now, and this error came out of nowhere. i have tried upgrading all dependencies without luck. Whenever i change something in a page or component, just simple text in a <p> tag, or a console.log() in the script, it performs a HMR as expected, but sometimes, every 5-10 time it throws an error. even if i just keep writing/deleting that same piece of text. It's random which error is thrown (2 different, but no consistency in which one). Error 1 (middleware.mjs) The terminal gives me this: page reload virtual:nuxt:PATH_TO_PROJECT/.nuxt/middleware.mjs The console in the browser throws an error: Uncaught SyntaxError: Identifier 'validate' has already been declared (at virtual:nuxt:PATH_TO_PROJECT/.nuxt/middleware.mjs?t=1750338823794:2:1) Error 2 (plugins.client.mjs) The terminal gives me this: page reload virtual:nuxt:PATH_TO_PROJECT/.nuxt/plugins.client.mjs The browser throws an error 500, with "Cannot read properties of undefined (reading 'primary')" this seems to be related to my plugins not loading as the specific console error tells about an unknown function (which is registered in a plugin)

6 Replies

kapa.ai•5mo ago

Hi @Herss. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like you're experiencing persistent and random HMR (Hot Module Replacement) issues in your Nuxt project, especially after adding or removing a package. Based on the knowledge sources, here are some targeted debugging steps and insights: 1. Component Naming Issues One known cause for HMR not working or behaving unexpectedly is component naming. For example, using inconsistent casing in component names (e.g., MyComponentOne vs. Mycomponentone) can break HMR. Renaming components to use consistent casing has resolved HMR issues for others. Double-check your component names for consistency, especially if you recently added or renamed components Nuxt 3 HMR Module not reloading changes. 2. Vite HMR Configuration If you have custom Vite HMR settings, ensure they're not forcing a protocol mismatch or conflicting with your environment. Recent changes in Nuxt reverted to letting Vite decide the websocket protocol for HMR, as forcing it could cause issues, especially behind proxies. If you have custom HMR config, try removing it and letting Vite handle it by default fix(vite): don't force hmr protocol if devServer.https is disabled. 3. HMR and Middleware/Plugins Errors like "Identifier 'validate' has already been declared" in generated files (e.g., .nuxt/middleware.mjs) can indicate that HMR is not properly invalidating or cleaning up old modules. There have been recent improvements in Nuxt to better handle HMR for templates, pages, and page metadata, reducing unnecessary invalidations and improving error handling. Make sure you're on the latest Nuxt version, as some of these fixes are recent fix(nuxt,vite): support hmr for templates, pages and page metadata. 4. Debugging Steps - Clear .nuxt and node_modules: Delete the .nuxt directory and node_modules, then reinstall dependencies and rebuild. - Minimal Reproduction: Try to isolate the issue by removing half of your code (bisecting) to see if the problem persists, as suggested by Nuxt maintainers. This can help pinpoint whether a specific plugin or code section is causing the issue named exports of components are incorrectly exposed. - Check for Plugin/Package Conflicts: Since the issue started after adding a package, ensure that all plugins and modules are compatible with your Nuxt version. Sometimes, a package can leave behind changes even after removal (e.g., altered config files or generated code). - Update All Dependencies: Run npx nuxi@latest upgrade --dedupe or your package manager's dedupe command to ensure no duplicate or incompatible packages are present Upgrading from 3.15.3 to 3.17.3 resulted in a large number of errors. 5. Debugging Tools - Enable Sourcemaps: This can help you trace errors more effectively in both client and server code. You can enable them in your nuxt.config:

  export default defineNuxtConfig({
    sourcemap: {
      server: true,
      client: true
    }
  })

  export default defineNuxtConfig({
    sourcemap: {
      server: true,
      client: true
    }
  })

- Use Node Inspector or IDE Debugging: Start Nuxt with nuxt dev --inspect and attach a debugger from your IDE for deeper inspection Debugging. 6. If All Else Fails If the issue persists and you can't isolate it, consider creating a minimal reproduction repository and sharing it with the Nuxt community or maintainers. This often leads to faster identification and resolution of obscure bugs. --- If you need more specific help, please provide a minimal reproduction or more details about the packages/plugins involved. The knowledge sources do not contain a direct solution for your exact error messages, but the above steps are based on similar reported issues and official debugging recommendations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

HerssOP•5mo ago

@kapa.ai my npx nuxi info looks like this: ------------------------------ - Operating System: Windows_NT - Node Version: v24.2.0 - Nuxt Version: 3.17.5 - CLI Version: 3.25.1 - Nitro Version: 2.11.12 - Package Manager: npm@11.3.0 - Builder: - - User Config: ssr, compatibilityDate, future, srcDir, dir, experimental, features, unhead, hooks, vite, devServer, nitro, typescript, runtimeConfig, modules, components, css, imports, tailwindcss, i18n, devtools - Runtime Modules: @pinia/nuxt@0.11.1, pinia-plugin-persistedstate/nuxt@4.3.0, @nuxtjs/tailwindcss@6.14.0, @nuxt/devtools@2.5.0, @nuxtjs/i18n@9.5.5, @vueuse/nuxt@13.3.0 - Build Modules: - ------------------------------

kapa.ai•5mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your npx nuxi info output, your environment is: - Nuxt Version: 3.17.5 - Node Version: v24.2.0 - Nitro Version: 2.11.12 - OS: Windows_NT - Package Manager: npm@11.3.0 - Runtime Modules:
- @pinia/nuxt@0.11.1
- pinia-plugin-persistedstate/nuxt@4.3.0
- @nuxtjs/tailwindcss@6.14.0
- @nuxt/devtools@2.5.0
- @nuxtjs/i18n@9.5.5
- @vueuse/nuxt@13.3.0 You are using a recent Nuxt 3 version with a modern Node and a set of common modules. There are no obvious incompatibilities in the versions listed, and your configuration is typical for a Nuxt 3 project. However, if you are experiencing HMR issues or errors as described in your previous message, the knowledge sources suggest: - HMR issues can sometimes be caused by component naming inconsistencies, plugin/module conflicts, or issues in generated files (like .nuxt/middleware.mjs or .nuxt/plugins.client.mjs) Nuxt 3 HMR Module not reloading changes. - Problems may persist even after removing a problematic package, especially if the package altered configuration or left behind generated code. - Deleting .nuxt and node_modules, then reinstalling dependencies, is a recommended first step. - If you have a custom srcDir, be aware of a known issue with named exports and Nitro's rollup build, especially if you see errors like "Cannot read properties of undefined (reading 'default')". A workaround is to set preserveModules: true in your Vite server build config. Example:

  export default defineNuxtConfig({
    vite: {
      $server: {
        build: {
          rollupOptions: {
            output: {
              preserveModules: true
            }
          }
        }
      }
    }
  })

  export default defineNuxtConfig({
    vite: {
      $server: {
        build: {
          rollupOptions: {
            output: {
              preserveModules: true
            }
          }
        }
      }
    }
  })

named exports of components are incorrectly exposed If you need more targeted help, please provide the specific error messages you are seeing. The knowledge sources do not contain information about any critical incompatibility with your listed versions, but do highlight the above troubleshooting steps for HMR and build issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

Merite•3mo ago

@Herss Were you able to find a solution to this problem?

Gaming

Programming

HMR issues - performs full page reload and causes errors.

Did you find this page helpful?