描述bug
Storybook很好,我们刚刚升级了Gatsby,需要升级Storybook。两者通常都能正常工作。
查看Gatsby的文档,这还没有为Storybook v7更新,系统部分一起工作的部分不起作用。
我已经尝试在现有的和一个全新的Gatsby和Storybook安装(下面的GitHub链接)中。
示例,当在一个故事中使用一个Gatsby <Link>
组件时,系统出错。
重现问题
https://github.com/darylthornhill/test-gatsby-storybook-error
我所做的一切就是设置了一个Gatsby链接并将其放在Header.tsx
中。
系统环境
Environment Info:
System:
OS: macOS 13.2.1
CPU: (10) arm64 Apple M2 Pro
Binaries:
Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
Browsers:
Safari: 16.3
npmPackages:
@storybook/addon-essentials: ^7.0.4 => 7.0.4
@storybook/addon-interactions: ^7.0.4 => 7.0.4
@storybook/addon-links: ^7.0.4 => 7.0.4
@storybook/blocks: ^7.0.4 => 7.0.4
@storybook/react: ^7.0.4 => 7.0.4
@storybook/react-webpack5: ^7.0.4 => 7.0.4
@storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2
其他相关信息
- 无响应*
8条答案
按热度按时间jm2pwxwz1#
感谢darylthornhill花时间打开一个问题并与我们跟进。为了给你一些背景信息,我们已经意识到这个事实,另一个社区成员已经向我们提出了一个类似的问题(例如#21958),关于Gatsby,我们正在收集信息,看看如何最好地解决这个问题,以便不仅你,还有其他Gatsby用户能够设置和使用Storybook而没有任何问题,并希望“越过这座桥”(原谅这个不好的双关语),并与Gatsby维护者保持联系,并对文档进行必要的更改。
编辑:我只是更新了问题标题以提高清晰度。希望你不要误解 🙏
qxgroojn2#
当然,这很有道理。
你提到的其他问题看起来确实有些不同,因为这似乎是有人在遇到一个Gatsby仓库的问题,该仓库已经有一个自定义的babel设置与你从storybook提供的设置冲突了(如果我理解正确的话?!)。
我描述的问题是一个全新的Gatsby设置,以及一个全新的storybook,在那里使用任何来自Gatsby的东西,就我的情况而言,
Link
不起作用。如果这也同样困扰着你内部的其他人,那也是有道理的。无论如何,任何进展都是有帮助的,我会关注其他问题!
感谢你的回复。
iklwldmw3#
你尝试过在Gatsby docs中提到的关于
preview.js/ts
和Gatsby Link的步骤吗?你提到的其他问题看起来确实有些不同,因为这似乎是因为有人在使用一个已经与你从storybook提供的自定义babel设置冲突的Gatsby仓库。(如果我理解正确的话?!)
那个自定义babel设置只是Gatsby文档中的一个最小示例,在我看来并不真正那么自定义。实际上可能只是
babel-preset-gatsby
导致的问题,似乎你还没有将其包含在你的项目中。有很多问题,其中一些似乎可以通过某种方式绕过,但似乎没有简单的方法可以让Storybook 7与Gatsby v4或v5一起工作。
@jonniebigodes 我们是否应该就这些问题与Gatsby进行一些统一讨论?似乎即使是Storybook frontpage仓库也受到了这些问题的影响:storybookjs/frontpage@main...upgrade-to-sb-7。我在自己的项目中探索了这些相同的更改,就像@kylegach在那里所做的那样。Gatsby文档已经过时了,我没有任何问题去贡献更新它们,但目前我无处可去,因为我对Storybook不太熟悉,让任何东西正常工作似乎都是一项艰巨的任务。
tquggr8v4#
Gatsby维护者在此 👋
很高兴帮助更新/重写我们的文档或就某些内部事项提供指导,以使事情正常工作:)
uqdfh47h5#
你好 :)我从问题#21958处来到这里。我们已经使用Storybook 6和Gatsby 5编写了一些工作故事,但在将Storybook升级到7并遵循所有指南后,我们发现了一个名为"Cannot find module"的问题。经过长时间的尝试修复上述问题后,我还尝试使用Gatsby 5初始化清除Storybook 7,猜怎么着:D还是存在相同的问题"Cannot find module"。这很奇怪,因为Storybook可以启动,但无法查看文件吗?
lf3rwulv6#
对于那些可能遇到这个问题的人,我成功地将我的storybook(7.1)和gatsby(5.11)结合使用,通过应用上述列出的几个不同的更改。
从Gatsby推荐的更改中,应用
main.js
和preview.js
所需的配置。你很可能会碰到另一个错误。
正如@oskari上面所指出的,storybook确实存在类似的问题,通过将
config.module.rules[0]
更改为config.module.rules[2]
来修复。一旦它开始工作,你的storybook将开始构建,但可能会留下
React is not defined
,但你可以通过删除if (parseInt(React.version) <= 18) { ... }
来绕过它。4zcjmb1e7#
有人可以在GitHub上创建一个示例的样板仓库,让Gatsby 5与Storybook 7一起工作吗?
我需要在Storybook中使用Gatsby风格的模块导入,以便开箱即用。
此外,我的大多数组件都是通过
useStaticQuery
获取数据的,所以这只是另一个需要解决的问题。在我看来,Gatsby团队似乎没有时间为Storybook集成留出时间?而Storybook团队也在忙于他们自己的事情...
brccelvz8#
你好!我正在尝试在我的Gatsby项目中安装storybook,并遇到了与storybook 8.2和gatsby 5.13相同的问题。我可以确认,在引入使用Gatsby link的组件之前,一切都运行正常。我也在
TypeError: Cannot read properties of undefined (reading '0')
上卡住了,根据@hazuremon的建议,我修改了main.ts
中的webpack配置代码,但没有有效地解决问题。以下是我卡住的地方:我重新设计了
main.ts
的webpack配置,以绕过未定义的错误,并通过搜索字符串选择要修改的规则。.storybook/main.ts
我认为我做的类似于之前建议的配置,未定义的控制台错误消失了,但现在我得到了这个:
也许
export-order-loader.js
出了什么问题?参考一下我的预览文件:
.storybook/preview.ts
如果有帮助的话,非常感谢🙏