storybookjs/storybook

[Bug]: incorrectly build preview when use pnpm with custom virtual store directory

Open

#20,211 建立於 2022年12月12日

在 GitHub 查看
 (1 留言) (0 反應) (0 負責人)TypeScript (89,909 star) (10,058 fork)batch import
bughelp wantedpnpmsev:S3

描述

Describe the bug

When use latest version of pnpm with .npmrc like this:

store-dir=${HOME}/.some-folder/pnpm-store
virtual-store-dir=${HOME}/.some-folder/pnpm-virtual-store

About store-dir and virtual-store-dir.

So in case when my node modules located somewhere outside the project then used babel-loader for preview - https://github.com/storybookjs/storybook/blob/7a86f0363ef184a80437b7abf98e98d86e821f75/code/lib/builder-webpack5/src/preview/babel-loader-preview.ts defines include property incorrectly. As a result babel-loader not transpile my storybook components and I got some TS error.

The problem in this getProjectRoot method - https://github.com/storybookjs/storybook/blob/7035ea7389393da041985ebc491ee58dedb50d06/code/lib/core-common/src/utils/paths.ts#L4-L29. It founds node_modules inside my virtual store in home and thinks that my components located in one directory up.

To fix this problem, I need to change include option for babel-loader inside webpackFinal.

Another bug with this method - https://github.com/storybookjs/storybook/issues/14042

To Reproduce

No response

System

No response

Additional context

No response

貢獻者指南

技術棧
typescriptnodejsreact
領域
frontendbuild systemdeveloper experience
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
4
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-2 days
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
stale
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
mostly clear
前置要求
Understanding of pnpm custom storeKnowledge of Storybook webpack configFamiliarity with babel loader include
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
20
研究方向
The bug is caused by getProjectRoot in code/lib/core common/src/utils/paths.ts incorrectly determining the project root when node modules is in a custom virtual store directory. The fix likely involves modifying babel loader preview.ts's include option to consider the actual project root. Investigate the linked issue #14042 and explore alternative methods to locate the root directory without relying on node modules location. Maintainers may provide guidance on the expected behavior.