Hot reload broken in Storybook 7 with NextJS

[cheryl-c-tirerack]

Describe the bug

I've seen this reported for other frameworks but I've not seen one for NextJS

In a fresh install of nextJs and storybook latest, the hot reloader is not working.
To test,
Run Storybook.
Go to any component such as button. Make a css change or a markup change. No reload happens. Further more, on a hard browser refresh, change does not appear.

I'm not sure which storybook version introduces this, it just appeared in recent month. It is making dev experience very bad.

To Reproduce

https://github.com/cheryl-c-tirerack/storybook-debugging

System

System:
    OS: macOS 13.4
    CPU: (12) arm64 Apple M2 Pro
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.16.0/bin/npm <----- active
    pnpm: 8.4.0 - ~/.nvm/versions/node/v18.16.0/bin/pnpm
  Browsers:
    Chrome: 119.0.6045.159
    Safari: 16.5
  npmPackages:
    @storybook/addon-essentials: ^7.5.3 => 7.5.3 
    @storybook/addon-interactions: ^7.5.3 => 7.5.3 
    @storybook/addon-links: ^7.5.3 => 7.5.3 
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8 
    @storybook/blocks: ^7.5.3 => 7.5.3 
    @storybook/nextjs: ^7.5.3 => 7.5.3 
    @storybook/react: ^7.5.3 => 7.5.3 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.5.3 => 7.5.3

Also with Node bump

System:
    OS: macOS 13.4
    CPU: (12) arm64 Apple M2 Pro
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm <----- active
  Browsers:
    Chrome: 119.0.6045.159
    Safari: 16.5
  npmPackages:
    @storybook/addon-essentials: ^7.5.3 => 7.5.3 
    @storybook/addon-interactions: ^7.5.3 => 7.5.3 
    @storybook/addon-links: ^7.5.3 => 7.5.3 
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8 
    @storybook/blocks: ^7.5.3 => 7.5.3 
    @storybook/nextjs: ^7.5.3 => 7.5.3 
    @storybook/react: ^7.5.3 => 7.5.3 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.5.3 => 7.5.3 

Additional context

No response

[valentinpalkovic]

Hello @cheryl-c-tirerack,

Thank you for reporting the issue.

Unfortunately, I cannot reproduce it. Hot reloading works fine. I tried it by changing the CSS, the Story file, and the component file itself. The changes are correctly sent to the browser, and the Story reloads immediately. I have tested it with both, Chrome and Safari.

Can you verify, whether you see network requests in your browser as soon as you change a file?

[cheryl-c-tirerack]

I do not see anything in the network tab.
I have been getting this browser console error for the same time period

client.js:199 [HMR] bundle 'preview' has 2 warnings
client.js:200 ./node_modules/@storybook/nextjs/dist/chunk-FFRTCGB4.mjs 1:224-231Critical dependency: require function is used in a way in which dependencies cannot be statically extracted./node_modules/@storybook/nextjs/dist/chunk-FFRTCGB4.mjs 1:353-360Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Which is part of

[cheryl-c-tirerack]

Looks related, however nothing in that thread tells me what to do to fix.
#21316
I tried
npx sb@next upgrade --tag future
but no fix

[kevinshoultz]

I am experiencing this. I create a fresh nextjs typescript app with a fresh installation of storybook.js, and I get this error out of the box.

I get the following error with it in the terminal:
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[valentinpalkovic]

I don’t think the error is connected to the HMR issue. I have the warning, too, and I don’t have any HMR issues. Unfortunately, I can’t reproduce it with the provided repo.

Can you all try to open Storybook in an Inkognito tab (to ensure that not a browser addon hinders HMR). Try also out other Browsers. Try to reproduce it on an online service like stackblitz to exclude that it has something to do with your machine or special OS settings.

[cheryl-c-tirerack]

I don’t think the error is connected to the HMR issue. I have the warning, too, and I don’t have any HMR issues. Unfortunately, I can’t reproduce it with the provided repo.

Can you all try to open Storybook in an Inkognito tab (to ensure that not a browser addon hinders HMR). Try also out other Browsers. Try to reproduce it on an online service like stackblitz to exclude that it has something to do with your machine or special OS settings.

I had tried Safari and incognito and still had issue.
I spun it up in stackblitz and it does not have the issue.
https://stackblitz.com/edit/stackblitz-starters-pkgudy?description=The%20React%20framework%20for%20production&file=stories%2Fbutton.scss&title=Next.js%20Starter

I can use this to try and compare local things but I'm open to clues as to where to look.
Can any other Mac user comment on how it works locally?

[cheryl-c-tirerack]

I came to confess a simple fix and I'm embarrassed.
Us Mac users sometimes go a long time without rebooting.
After trying everything else including a VS Code reinstall, nothing was helping.
Then, I simply rebooted and the bug is gone.
Don't be like me. Thanks everyone!

[valentinpalkovic]

Great to hear that a simple reboot has fixed the issue. Thank you for trying all those things out!