8000 fix: restore HMR functionality for Nuxt 3.15.3 and above by rhelling · Pull Request #896 · nuxt-modules/storybook · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

fix: restore HMR functionality for Nuxt 3.15.3 and above #896

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: restore HMR functionality for Nuxt 3.15.3 and above #896

wants to merge 1 commit into from

Conversation

rhelling
Copy link

🔗 Linked issue

Resolves #891

📚 Description

Starting with Nuxt 3.15.3, Vite no longer initializes properly in development mode, which results in broken hot module reloading (HMR).

Explicitly set vite.mode to 'development' in the loadNuxt call to ensure Vite initializes correctly. This restores HMR functionality in Nuxt 3.15.3 and above.

@rhelling
fix: enable vite development mode
36ddb69 
This is broken after Nuxt 3.15.3
@netlify Netlify
Copy link
netlify bot commented May 12, 2025

👷 Deploy request for nuxt-storybook pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 36ddb69

@rhelling
Copy link
Author

Although this was working for me yesterday, today I tried to do the same using the viteFinal Storybook configuration in a project. This didn't work so I decided to take a look again at this PR. After running initializing the project again I came to the conclusion this did not work either.

@rhelling
Copy link
Author
rhelling commented May 13, 2025 •
edited
Loading

So one hacky option would be to set dev to true after nuxt has loaded, which causes some additional problems

  nuxt.hook('ready', (app) => {
    app.options.dev = true
  })

Or set dev initially to true, and find a way to disable the 'storybook nuxt'-module in the nuxt config, so storybook only loads once.

@tobiasdiez
Copy link
Collaborator

Thanks for looking into this.

If you start nuxt, which then loads storybook - which then access the nuxt config to setup the vite loader, then it actually should use the already running nuxt instance:

storybook/packages/storybook-addon/src/preset.ts

Lines 65 to 81 in 87e21b7

let nuxt = tryUseNuxt()
if (nuxt) {
// Nuxt is already started in the current process (i.e. in dev mode)
// We assume that we are called from the Nuxt module, which means that
// Nuxt is in the "load module" state and we can access the Vite config later via the hook
const nuxtRes = nuxt
return new Promise<{ viteConfig: ViteConfig; nuxt: Nuxt }>((resolve) => {
nuxtRes.hook('vite:configResolved', (config, { isClient }) => {
if (isClient) {
resolve({
viteConfig: config,
nuxt: nuxtRes,
})
}
})
})
}

So it shouldn't load storybook again. But maybe I also misunderstood the problem of " so storybook only loads once"

@rhelling
Copy link
Author
rhelling commented May 21, 2025 •
edited
Loading

This is true when you use the Nuxt plugin and start a Nuxt development environment. The others that start storybook standalone (like the npm run playground:storybook:dev demo) will encounter this issue. This doesn't re-use the existing Nuxt instance, but starts a new one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Hot Module Replacement (HMR) broken in Nuxt starting from v3.15.3
2 participants
@rhelling @tobiasdiez
0