GitHub - D1no/reproduction-storybook-symlinks-pnpm: Test-Rig for Storybook compatibility with Vite inside a small- to mid-size `pnpm` integrated Mono-Repository

_{Reproduction was created with pnpx storybook@next init --builder vite on node version 18 LTS. Consecutive update via pnpx storybook@next upgrade --prerelease --skip-check and on 2023-03-17 from this tag for this original issue onwards extended to a pnpm mono repo workspace with issue cases.}

Issue: storybookjs/storybook/issues/21399
Storybook Version: ^7.0.0-rc.4
PNPM Version: ^7.29.3
Node Version: 18 LTS
Builder: vite
Renderer: react 18

Test Rig: Storybook in a Typical PNPM Monorepo

This repository mimics a typical integrated monorepo architecture where individual views or "micro front-ends" consume one or more centralized UI libraries. Build and test tooling (like storybook) live outside of that relationship to ensure weak coupling.

 MonoRepo/                        PNPM Workspace
     │
     ├─ ...
     │                            Outside components
     ├─ tools/                    are referenced via
     │  └── storybook ◄──┬────┐   symlinked packages
     │                   │    │   in node_modules.
     ├─ ui/              │    │
     │  ├── Component────┘    │   Storybook Issues:
     │  ├── Component         │
     │  └── ...    │          │   · TSDocs to Arg-Docs
     │             │          │   · "New File" HMR
     └─ views/     ▼          │   · Recursions / Broken
        ├── SampleView────────┘   · ...
        └── ...

How to run Storybook Issues Inspection

Clone D1no/reproduction-storybook-symlinks-pnpm

git clone [email protected]:D1no/reproduction-storybook-symlinks-pnpm.git && cd reproduction-storybook-symlinks-pnpm.git

and install

pnpm install

For install with empty cache, run
pnpm clean-install

then for the case run the respective pnpm script...

these are defined in main.ts under tools/.storybook/main.ts

Expectation

After running pnpx storybook@next init --builder vite, official storybook features should function without any additional configuration of loaders, builders or other down stream dependencies installed by storybook.

❗️ Preview images are from Version 7.0.0-rc.4 and NOT continuously updated to the latest version.

Case 1: Components inside storybook folder

pnpm run storybook:case_1

Components that are inside of the storybook root folder (../stories) will:

For real files (tools/stories/Component)
- Render successfully in storybook
- Have JSDocs converted to story docs
- Have HMR show new stories files (while running, co-located another.stories-hmr.tsx to .stories.tsx)
For symbolic links (tools/stories/ComponentAsSymlink)
- Render successfully in storybook
- Have JSDocs converted to story docs
- Have HMR show new stories files (while running, co-located another.stories-hmr.tsx to .stories.tsx)

Case 2-1: Components outside storybook folder

pnpm run storybook:case_2-1

Components that are outside of the storybook root folder but referenced with a relative path (../../ui/) will:

Render successfully in storybook
Have JSDocs converted to story docs
Have HMR show new stories files (while running, co-located another.stories-hmr.tsx to .stories.tsx)

Case 2-2: Single capitalized component folder outside storybook

pnpm run storybook:case_2-2

A single component that is outside of the storybook root folder but referenced with a relative path (../../ui/Component) to its capitalized folder, will:

❌ ERROR: WARN 🚨 Unable to index ./../ui/Component/index.stories.tsx

tools storybook: WARN 🚨 Unable to index ./../ui/Component/index.stories.tsx:
tools storybook: WARN   Error: Invalid kind '', must include alphanumeric characters
tools storybook: WARN     at m (/Users/worker/development/_REPRODUCTIONS/reproduction-storybook-symlinks-pnpm/node_modules/.pnpm/@[email protected]/node_modules/@storybook/csf/dist/index.js:3:3033)
tools storybook: WARN     at N (/Users/worker/development/_REPRODUCTIONS/reproduction-storybook-symlinks-pnpm/node_modules/.pnpm/@[email protected]/node_modules/@storybook/csf/dist/index.js:3:3126)
tools storybook: WARN     at /Users/worker/development/_REPRODUCTIONS/reproduction-storybook-symlinks-pnpm/node_modules/.pnpm/@[email protected]/node_modules/@storybook/csf-tools/dist/index.js:18:343
tools storybook: WARN     at Array.reduce (<anonymous>)
tools storybook: WARN     at CsfFile.parse (/Users/worker/development/_REPRODUCTIONS/reproduction-storybook-symlinks-pnpm/node_modules/.pnpm/@[email protected]/node_modules/@storybook/csf-tools/dist/index.js:18:230)
tools storybook: WARN     at Object.indexer (/Users/worker/development/_REPRODUCTIONS/reproduction-storybook-symlinks-pnpm/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/presets/common-preset.js:8:2055)
tools storybook: WARN     at async StoryIndexGenerator.extractStories (/Users/worker/development/_REPRODUCTIONS/reproduction-storybook-symlinks-pnpm/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:13:3554)
tools storybook: WARN     at async /Users/worker/development/_REPRODUCTIONS/reproduction-storybook-symlinks-pnpm/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:13:1869
tools storybook: WARN     at async Promise.all (index 0)
tools storybook: WARN     at async Promise.all (index 0)

Render successfully in storybook
Have JSDocs converted to story docs
Have HMR show new stories files (while running, co-located another.stories-hmr.tsx to .stories.tsx)

Case 3: Components added to storybook from `pnpm` workspace

pnpm run storybook:case_3

Components that are outside of the storybook root folder but referenced via pnpm workspaces, therefore located in ../node_modules/@repo/ as a symlink will:

❌ ERROR: importers[path] is not a function

importers[path] is not a function
TypeError: importers[path] is not a function
    at StoryStore.importFn (http://localhost:6006/virtual:/@storybook/builder-vite/storybook-stories.js:6:31)
    at StoryStore.loadCSFFileByStoryId (http://localhost:6006/sb-preview/runtime.mjs:40:8376)
    at StoryStore.loadStory (http://localhost:6006/sb-preview/runtime.mjs:40:9563)
    at async http://localhost:6006/sb-preview/runtime.mjs:74:9003
    at async StoryRender.runPhase (http://localhost:6006/sb-preview/runtime.mjs:74:8764)
    at async StoryRender.prepare (http://localhost:6006/sb-preview/runtime.mjs:74:8922)
    at async PreviewWeb.renderSelection (http://localhost:6006/sb-preview/runtime.mjs:94:3120)

Render successfully in storybook
Have JSDocs converted to story docs
Have HMR show new stories files (while running, co-located another.stories-hmr.tsx to .stories.tsx)
Detects symlink recursion or provides easy way to exclude them

Case 4: Components via `pnpm` with globby workaround in `main.ts` to avoid `node_modules` recursion

pnpm run storybook:case_4
# or
pnpm run storybook

Components that are outside of the storybook root folder but referenced via pnpm workspaces, ingested via a negative glob to avoid recursion as ../node_modules/@repo/**!(node_modules)/**!(node_modules)/*.stories.@(js|jsx|ts|tsx) will:

Render successfully in storybook
Have JSDocs converted to story docs
Have HMR show new stories files (while running, co-located another.stories-hmr.tsx to .stories.tsx)
Detects symlink recursion or provides easy way to exclude them

System

Via pnpx sb@next info on 2023-03-18

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.14.1 - ~/.nvs/default/bin/node
    npm: 9.3.1 - ~/.nvs/default/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 97.0.1
    Safari: 16.3
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/addon-interactions: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/addon-links: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/blocks: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/react: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/react-vite: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Name		Name	Last commit message	Last commit date
Latest commit History 32 Commits
tools		tools
ui		ui
views		views
.gitignore		.gitignore
.npmrc		.npmrc
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
readme.md		readme.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Test Rig: Storybook in a Typical PNPM Monorepo

How to run Storybook Issues Inspection

Expectation

Case 1: Components inside storybook folder

Case 2-1: Components outside storybook folder

Case 2-2: Single capitalized component folder outside storybook

Case 3: Components added to storybook from `pnpm` workspace

Case 4: Components via `pnpm` with globby workaround in `main.ts` to avoid `node_modules` recursion

System

About

Releases

Packages

Languages

D1no/reproduction-storybook-symlinks-pnpm

Folders and files

Latest commit

History

Repository files navigation

Test Rig: Storybook in a Typical PNPM Monorepo

How to run Storybook Issues Inspection

Expectation

Case 1: Components inside storybook folder

Case 2-1: Components outside storybook folder

Case 2-2: Single capitalized component folder outside storybook

Case 3: Components added to storybook from pnpm workspace

Case 4: Components via pnpm with globby workaround in main.ts to avoid node_modules recursion

System

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Case 3: Components added to storybook from `pnpm` workspace

Case 4: Components via `pnpm` with globby workaround in `main.ts` to avoid `node_modules` recursion

Packages