Hot Module Replacement (HMR) broken in Nuxt starting from v3.15.3

[rhelling]

Environment

---

• Operating System: Linux
• Node Version: v20.19.1
• Nuxt Version: 3.16.2
• CLI Version: 3.25.0
• Nitro Version: 2.11.10
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, modules
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/nuxt-modules-storybook-3zket1gm

Describe the bug

After upgrading to Nuxt 3.15.3, HMR no longer works as expected. This issue is not present in 3.15.2 or earlier versions.

Notable changes observed in 3.15.3: • The generated vite-*.config.json files have changed. • Both import.meta.dev and module.hot are now false, where they were previously true.

I wasn’t able to identify the exact change in Nuxt that introduced this behavior, but monkey-patching the loadNuxt parameters in the presets solves the issue:

  nuxt = await loadNuxt({
    cwd: root,
    ready: false,
    dev: true, // Was previously `dev: false`
    overrides: {
      appId: "nuxt-app",
      buildId: "storybook",
      ssr: false
    }
  });

💥 Reproduction Steps

• Open the reproduction URL
• Navigate to the “Nuxt Welcome Story”
• Make a change in MyWelkom.vue
• Observe that the change does not trigger HMR
• Manually close and reopen the preview
• Navigate back to the “Nuxt Welcome Story”
• Observe __VUE_HMR_RUNTIME__ is not defined

Additional context

No response

[rhelling]

Also see: https://github.com/storybookjs/storybook/issues/31010

[gustavotoyota]

Just bumped into this problem. My stories load correctly initially, but break after hot reloads.

[hacknug]

HMR seems to be (partially) working on my end when running nuxt dev but ONLY for changes made to the components I'm documenting. To make changes to my stories or create new ones I need to restart my server for the changes to show up.

[robigan]

HMR seems to be (partially) working on my end when running nuxt dev but ONLY for changes made to the components I'm documenting. To make changes to my stories or create new ones I need to restart my server for the changes to show up.

Same here, but the proposed patched in #896 doesn't work when applying it using yarn's patching system.

I wonder if yarn didn't properly apply the patch, or I'm patching the wrong function?

[robigan]

Actually, upon more testing, it seems that re-rendering and updating works, but upon refresh of the page, I get the error again.

NB: I am not sure if it was working like this already prior to the patch or not.

[J-Michalek]

Experiencing the same issue as @robigan when making changes inside of components the HMR works, but when I change the story itself it never updates until I restart the dev server.

[hacknug]

I think the regression was introduced in https://github.com/nuxt/nuxt/pull/30620, more specifically the changes made to isIgnored and the introduction of createIsIgnored (https://github.com/nuxt/nuxt/pull/30620/files#diff-79ce1279f3fd2f0b204a255c2587d9e3b9ca8e9e14e8b1e7f83e2bf74c271143R6-R8).

Not sure what the proper fix should be, but adding this to .storybook/main.ts seems to solve all issues on my end:

  viteFinal: async (config: InlineConfig) => {
    config.server ??= {}
    config.server.watch = { ...config.server.watch, ignored: ['**/node_modules/**', '**/.nuxt/analyze/**'] }
    return config
  },

On my end I see those two patterns and a function. Removing the function makes HMR work as expected.

Manually filtering that array seems like the wrong approach.

Any advice on how to properly implement a fix here? //cc @danielroe @tobiasdiez @chakAs3

[rhelling]

@hacknug Thanks for the effort. I applied the changes to .storybook/main.ts in the reproduction environment but I still end up with an _VUE_HMR_RUNTIME__ is not defined error.

[hacknug]

@hacknug Thanks for the effort. I applied the changes to .storybook/main.ts in the reproduction environment but I still end up with an _VUE_HMR_RUNTIME__ is not defined error.

Are you using the latest version of the module?

[danielroe]

my guess here is that nuxt is correctly ignoring storybook files. like tests, they should not be included in the nuxt build or watcher. the storybook module should, if necessary, override nuxt's watching settings when it uses the nuxt vitest config.

[hacknug]

my guess here is that nuxt is correctly ignoring storybook files. like tests, they should not be included in the nuxt build or watcher. the storybook module should, if necessary, override nuxt's watching settings when it uses the nuxt vitest config.

@danielroe yeah, I saw *.stories.ts files being added to chokidar's exclude key, but even after overwriting those, HMR was broken because of the aforementioned function in config.server.watch.ignored.

Maybe I overwrote it incorrectly?

[danielroe]

it doesn't sound like a bug in Nuxt to me.

it's an implementation detail in the storybook module.

[rhelling]

@hacknug Thanks for the effort. I applied the changes to .storybook/main.ts in the reproduction environment but I still end up with an _VUE_HMR_RUNTIME__ is not defined error.

Are you using the latest version of the module?

@hacknug I updated the reproduction to the latest versions and applied the suggested fix so you can verify.