storybookjs/storybook

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

Open

#20,211 opened on 2022年12月12日

GitHub で見る
 (1 comment) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)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
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
4
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-2 days
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
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.