storybookjs/storybook

[Bug]: Path capitalization can break HMR

Open

#21,349 opened on Mar 2, 2023

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
bughas workaroundhelp wantedsev:S4windows

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

Describe the bug

Hey hey love Storybook. This is on the beta 7.0.0-beta.44 & I also tried the latest as of posting (I think that was .55?) but I believe it's probably present in 6 as well.

I just wanted to report this just incase someone else spends forever trying to figure why some stories won't reload/HMR refresh when you save them but will re-render when you restart the development environment. No errors displayed etc.

In my case I am on Windows 10 and our site has a folder that is capitalized Sites but in my stories glob I had passed in sites to the path.

Here's where the bug is though: because while that is a user error it would have been very easily figured out if the stories weren't rendering at all. But there's a difference in how the paths are handled for the HMR/Refreshing on save and how the initial globbing for rendering the initial views takes place.

My suggestion would be to make the globs passed into StorybookConfig.stories respect path capitalization on Windows.

Either way, hopefully this report helps some people who run into this situation--If your stories aren't reloading on save make sure your glob is 100% correct!

To Reproduce

Reproduction steps

  1. Create Storybook 7 instance
  2. Glob with lowercase letters your folder containing your stories (such as /stories/*.mdx)
  3. Capitalize that folder on your file system (so its actually /Stories/*.mdx)
  4. Start up development environment
  5. Observe that the stories are all rendered
  6. Make any change to any of the files and see that they are not updated.

System

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
  Binaries:
    Node: 18.14.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.57)
  npmPackages:
    @storybook/addon-essentials: 7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/addon-interactions: 7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/addon-links: 7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/blocks: 7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/react: 7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/react-vite: 7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/testing-library: 0.0.14-next.1 => 0.0.14-next.1

Additional context

No response

Contributor guide