[Bug]:在turbo + sveltekit + pnpm单仓库中,storybook初始化失败,

bt1cpqcv  于 4个月前  发布在  其他
关注(0)|答案(7)|浏览(38)

描述问题

在尝试解决 Storybook 支持 Svelte 4 和 Storybook 8 的问题时,我遇到了一些问题。
当尝试创建一个新的 turbo + sveltekit + pnpm 单仓库时,storybook init 失败了。
请查看相关联的仓库以获取更多详细信息。

复现链接

https://github.com/cge-taal/test-sveltekit-storybook

复现步骤

  • 无响应*

系统环境

Storybook Environment Info:

  System:
    OS: macOS 13.5.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.7.0 - /usr/local/bin/npm
    pnpm: 9.4.0 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Safari: 16.6

其他相关信息

  • 无响应*
xdyibdwo

xdyibdwo1#

免责声明

由于信息是自动生成的,可能存在不准确的情况。
要解决在 turbo + sveltekit + pnpm monorepo 中与 storybook init 相关的问题,请按照以下步骤操作:

  1. 安装 Storybook for SvelteKit:
pnpm add --save-dev @storybook/sveltekit
  1. 初始化 Storybook:
pnpm dlx storybook@latest init --type sveltekit
  1. 检查 preset.js/code/frameworks/sveltekit:
    确保配置与您的 monorepo 设置相符。如有必要,请调整路径。
  2. 更新 tsconfig.json:
    验证 /code/frameworks/sveltekit/tsconfig.json 中的 TypeScript 设置,以确保与您的项目结构兼容。
  3. 审查 vitest.config.ts:
    确认 /code/frameworks/sveltekit/vitest.config.ts 中的 Vitest 配置已正确设置为您的 monorepo。
    这些步骤应该有助于解决您特定设置中的初始化问题。

参考资料

/code/frameworks/sveltekit
/docs/_snippets/sveltekit-install.md
/docs/_snippets/svelte-vite-install.md
/docs/_snippets/svelte-webpack5-install.md
/docs/_snippets/storybook-init-v7.md
/docs/_snippets/init-command.md
/docs/_snippets/init-command-manual-framework.md

关于 Greptile

此响应为您提供了研究的起点,而非精确的解决方案。
帮助我们改进!如果这有帮助,请留下一个 👍,如果无关紧要,请留下一个 👎。

o75abkj4

o75abkj42#

以下是一些建议:

  1. 尝试使用 pnpm dlx storybook@8.1 init --type sveltekit。我们在8.2版本中进行了大量的改进,但可能仍然存在问题。我尝试了这个,并在 .svelte 文件附近遇到了不同的错误。
  2. 尝试为您的 ui 包添加一个 Vite 配置文件——目前还没有,但我认为必须有这样的配置文件才能处理 .svelte 文件。
6gpjuf90

6gpjuf903#

非常感谢@shilman - 我承认我故意只尝试坚持基本原则,作为对SvelteKit及其周边生态系统成熟度的测试。很高兴收到您的反馈,关于Storybook的8.2版本在SvelteKit支持方面仍然有些粗糙 - 就这一点而言。
我会将ui包更新为更接近我手头另一个版本的内容 - 它类似于所谓的“SvelteKit库 backbone 项目”(或类似)。
希望最终结果是在哪个版本的库中保持一致以获得完整的集成能力。
有了这个知识,也许甚至turborepo也可以更新,为其SvelteKit启动器包含更现实的基本内容。

ghhaqwfi

ghhaqwfi4#

顺便说一下,我的真实用例是在上面提到的monorepo环境中让Storybook完全工作。
据我所知,Storybook仍然需要使用addon-svelte-csf插件来启用Svelte/SvelteKit的故事?
对于Storybook >= 8,这是否仍然适用?需要支持<slot/>吗?
实际的工作示例将是非常有益的。我看到的主要是开放式票据,而且并不是很清楚要使用哪些库和API的哪个版本。
相关票据:storybookjs/addon-svelte-csf#188

pu82cl6c

pu82cl6c5#

对不起@shilman,我当时正忙于其他事情。所以我尝试了你的建议。以下是我的步骤:

在这一点上,我完全按照你的建议做了:
SvelteKit在项目模板中找不到 - 请查看附件。
这让我相信工具中没有SvelteKit支持,而且我找不到一个最新的例子可以正常工作。我的下一步行动将包括“尝试很多不同的事情,进行大量的错误试验”,正如Svelte Discord上的某人建议的那样。

xxslljrj

xxslljrj6#

@cge-taal 典型的使用 npx storybook@latest init 的方式是在包含组件的现有项目目录中运行,而不是在空目录中。当你在一个空目录中运行它时,它首先会引导一个你选择的项目,然后将 Storybook 安装到其中。
正如你在截图中的空文件夹 init 上方所说:

ct3nt3jp

ct3nt3jp7#

再次感谢@shilman的持续帮助。是的,我确实创建了一个仓库来说明你建议的内容:https://github.com/cge-taal/storyrepo
在这里重复步骤

npx create-turbo@latest -e with-svelte storyrepo # choose pnpm
cd storyrepo/apps
npm create svelte@latest storybook # Choose Library project and TS. Don't add Svelte5
cd storybook

然后 pnpm dlx storybook@latest init --type sveltekit ,因为8.1版本也给我带来了问题。我很乐意帮助调试这个环境设置,并为这个环境设置一个明确的路径。请不要犹豫地提出更多我可以尝试的事情。
谢谢!

相关问题