storybookjs/storybook

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

Closed

#20,211 opened on Dec 12, 2022

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
bughelp wantedpnpmsev:S3

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

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

Contributor guide

Research direction
Examine the getProjectRoot method in code/lib/core common/src/utils/paths.ts and trace how it affects the babel loader include option in preview babel loader configuration. Look at related issue #14042 for context.
Tech stack
typescriptreact
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Node.jspnpmStorybook
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50