React Storybook 运行时出现空白页面

Question

我尝试加载演示的 Storybook 故事。 我使用 create-react-app 创建了一个 React 应用并运行了 npm start。它在端口3000上启动。 然后当我运行npm run storybook时，它会在端口6006上打开一个浏览器。但是只显示一个空白页面。

- Aysha Hamna

---

如果你提供的细节非常少，那么帮助起来会相当困难。控制台中是否记录了任何错误？你能提供你的 package.json 文件吗？ - Drew Reese

没有错误。它只是在浏览器中显示一个空白页面，而不是演示storybook故事。 - Aysha Hamna

我认为有一些错误，请打开开发者控制台，我遇到了同样的问题，它与React Hooks有些问题。 - MBehtemam

Answer 1

对我有帮助的是运行

rm yarn.lock
yarn install

安装了storybook到我的项目之后

- P.J.Meisch

Answer 2

显然，React已经升级到17.0.0版本，但Storybook还没有进行更新。如果使用16.14.0版本的React应该可以正常工作。

https://www.youtube.com/watch?v=fjb_QcQhRrs

- Beny

Answer 3

如果您想保持React版本17，则可以通过以下方式将故事书升级到预发布版

npx sb@next upgrade --prerelease

如需更多信息，请参考 GitHub 问题 #12408

- U.A

Answer 4

npm ci 挽救了我的一天并解决了这个问题。

- guipace

Answer 5

我的问题是因为我也更新了@storybook/preset-create-react-app，而我似乎不应该这样做。

当@storybook/preset-create-react-app回滚到初始版本3.2.0，并且@storybook/react更新到最新的^6.5.4时，一切都正常。

- trainoasis

Answer 6

尝试清除浏览器缓存。这解决了我的问题。

- mstoJS