storybook: Slow start React guide doesn't work
Describe the bug
I’m building a UI kit with React. My build is just react, babel, and rollup to compile. When adding storybook based on the slow start react guide- webpack doesn’t fully compile and I’m left with a Cannot get / error on the defined port.
To Reproduce
- Spin up a simple react project with just babel and rollup
- Follow this guide
yarn run storybook
Or just run this demo repo
Expected behavior It should bundle the stories and display them in the browser, according to the guide. These are the only steps it provides for adding storybook to an existing react project.
Code snippets Demo repo
System:
- OS: macOS
- Device: MacBook Pro 2015
- Browser: Firefox
- Framework: React
- Addons: N/A
- Version: 4.0.0
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 32 (6 by maintainers)
Hopefully posting this doesn’t reopen the issue but for yarn users, if you set up storybook with the CLI commands which uses npm by default, you could run into this. The two package managers handle dependencies very differently and it turned out to be my issue. Trashing node_modules and package-lock and reinstalling with yarn fixed it.
Just in case someone else stumbles across this in a Google search like I did, I want to repeat the fix that helped me:
Delete your
package-lock.jsonand yournode_modulesdirectory.To fix this, run start-storybook once with the --no-manager-cache flag, and hopefully Storybook will work correctly for you. You only need to use this flag once; after that, the cache should be in a good state. The docs advise against using this flag all the time for performance reasons. Reference:https://githubmemory.com/repo/storybookjs/storybook/issues/14672
I’ll take a look what’s going on
It can be caused by using the https://storybook.js.org/blog/storybook-6-migration-guide/
npx sb upgradeNPM command to upgrade while otherwise using yarn. No need to delete package file, just node_modules.Hi everyone! Seems like there hasn’t been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don’t have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
@MilosJo did you follow these instructions? https://www.gatsbyjs.org/docs/visual-testing-with-storybook/
There’s something wrong with your
yarn.lockfile. When I remove it and reinstall, it works fine.Yeah, I was having this same issue. Deleting the
package-lock.jsonandnode_modulesand then runningnpm installworked for me. The storybook guide for migrating to storybook 6 gives the same advice at the bottom of the “Breaking Changes” section: https://storybook.js.org/blog/storybook-6-migration-guide/Hey @shilman Yeah, current project is run on Storybook 4.x. Will migrate it this week to Storybook 5.x. Thanks for the heads-up. Much appreciated
I ran into this issue after upgrading storybook v3 within a monorepo to v4.
There’s zero console output in the browser or within stdout to tell me what errors, if any, are occurring, only this cryptic cannot GET/ message on the webpage.