storybook: Not working with pnpm

Describe the bug Installation with pnpm doesn’t work.

To Reproduce Steps to reproduce the behavior:

In a new folder…

  1. pnpx create-react-app app
  2. cd app
  3. pnpx sb-init
  4. rm -rf node_modules
  5. pnpm i
  6. pnpm run storybook

Expected behavior Starts normally.

Screenshots

> app@0.1.0 storybook /home/node/x/app
> start-storybook -p 6006 -s public

info @storybook/react v6.1.10
info 
info => Loading static files from /home/node/x/app/public and serving at /.
info => Using prebuilt manager
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Loading Webpack configuration from `node_modules`
info => Removing existing JavaScript and TypeScript rules.
ERR! Error: Cannot find module '/home/node/x/app/node_modules/config/webpack.config'
ERR! Require stack:
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/preset-create-react-app@3.1.5_9aa452dba90d1f953a1868926ff23f98/node_modules/@storybook/preset-create-react-app/dist/index.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/presets.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/config.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/build-static.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/server.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/react@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/react/dist/server/index.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/react@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:725:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:952:19)
ERR!     at require (internal/modules/cjs/helpers.js:88:18)
ERR!     at Object.exports.webpack (/home/node/x/app/node_modules/.pnpm/@storybook/preset-create-react-app@3.1.5_9aa452dba90d1f953a1868926ff23f98/node_modules/@storybook/preset-create-react-app/dist/index.js:111:28)
ERR!     at /home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/presets.js:259:28
ERR!     at async startPreview (/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/dev-server.js:407:23)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/dev-server.js:494:29)
ERR!     at async buildDevStandalone (/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/build-dev.js:317:33)
ERR!     at async buildDev (/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/build-dev.js:380:3)
ERR!  Error: Cannot find module '/home/node/x/app/node_modules/config/webpack.config'
ERR! Require stack:
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/preset-create-react-app@3.1.5_9aa452dba90d1f953a1868926ff23f98/node_modules/@storybook/preset-create-react-app/dist/index.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/presets.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/config.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/build-static.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/server.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/react@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/react/dist/server/index.js
ERR! - /home/node/x/app/node_modules/.pnpm/@storybook/react@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:725:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:952:19)
ERR!     at require (internal/modules/cjs/helpers.js:88:18)
ERR!     at Object.exports.webpack (/home/node/x/app/node_modules/.pnpm/@storybook/preset-create-react-app@3.1.5_9aa452dba90d1f953a1868926ff23f98/node_modules/@storybook/preset-create-react-app/dist/index.js:111:28)
ERR!     at /home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/presets.js:259:28
ERR!     at async startPreview (/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/dev-server.js:407:23)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/dev-server.js:494:29)
ERR!     at async buildDevStandalone (/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/build-dev.js:317:33)
ERR!     at async buildDev (/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/build-dev.js:380:3) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '/home/node/x/app/node_modules/.pnpm/@storybook/preset-create-react-app@3.1.5_9aa452dba90d1f953a1868926ff23f98/node_modules/@storybook/preset-create-react-app/dist/index.js',
ERR!     '/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/presets.js',
ERR!     '/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/config.js',
ERR!     '/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/build-static.js',
ERR!     '/home/node/x/app/node_modules/.pnpm/@storybook/core@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/server.js',
ERR!     '/home/node/x/app/node_modules/.pnpm/@storybook/react@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/react/dist/server/index.js',
ERR!     '/home/node/x/app/node_modules/.pnpm/@storybook/react@6.1.10_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/react/bin/index.js'
ERR!   ]
ERR! }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

System

+ sb 6.2.0-alpha.5

Environment Info:

  System:
    OS: Linux 5.3 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.15.1 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.1.10 => 6.1.10 
    @storybook/addon-essentials: ^6.1.10 => 6.1.10 
    @storybook/addon-links: ^6.1.10 => 6.1.10 
    @storybook/node-logger: ^6.1.10 => 6.1.10 
    @storybook/preset-create-react-app: ^3.1.5 => 3.1.5 
    @storybook/react: ^6.1.10 => 6.1.10

Additional context At first blush, it appears that the problem is that storybook can’t find the location of react-scripts.

Apparently, while npm symlinks node_modules/.bin/react-scripts, pnpm puts in place a hardlink. This messes with cra-config.ts, which can’t resolve the location of the package.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 187
  • Comments: 60 (20 by maintainers)

Commits related to this issue

Most upvoted comments

The issue can be traced to this line: https://github.com/storybookjs/presets/blob/master/packages/preset-create-react-app/src/index.ts#L102

scriptsPath is the default /user/name/node_modules, which won’t work for pnpm. While not ideal, a workaround is to explicitly declare the scriptsPackageName option on the preset, which forces the code into the if block that then uses require.resolve to resolve the react-scripts package path appropriately via pnpm (https://github.com/storybookjs/presets/blob/master/packages/preset-create-react-app/src/index.ts#L67).

The issue could potentially be resolved by defaulting options.scriptsPackageName to react-scripts (rather than leaving options.scriptsPackageName undefined).

Workaround details:

In .storybook/main.js, change:

  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]

to:

  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: "@storybook/preset-create-react-app",
      options: {
        scriptsPackageName: 'react-scripts'
      }
    }
  ]

Hope it at least helps someone get unblocked.

+52
kaidjohnson on Jan 4, 2021

No worries! We know folks like using PNPM and I’m on a mission to make Storybook work correctly with it out of the box. It’s just been a bit tricky, is all, but we’re getting close.

+45
IanVS on Nov 21, 2022

change your pnpm to npm and works just fine

+42
grinsteindavid on Jul 1, 2022

PNPM should be fully supported by Storybook now in the latest beta versions of 7.0. If you’re still experiencing any issues after updating with pnpx sb@next upgrade --prerelease (or installing with pnpx sb@next init), please search to make sure there’s no issue already, then open a new issue with as many details as possible.

Thanks for your patience, everyone. I’m excited that I’m one step closer to being able to use pnpm in my own projects now too!

+23
IanVS on Dec 30, 2022

I encountered this same problem. PNPM is the 3rd most popular package manager for Node.js. It has a huge user base, particularly for large corporate monorepos. What can we do to get PNPM support?

+21
octogonz on Jul 30, 2021

This should work:

  1. npx sb init -s: Skip installation of dependencies on the initial script
  2. pnpm i: Install by yourself
+20
BerkeKaragoz on May 7, 2022

Any news on this?

+19
DylanCulfogienis on May 14, 2021

with node-linker=hoisted it should work

+17
zkochan on Jan 9, 2022

i just encountered the same problem +1

+15
alexn-s on Jul 3, 2022

I’ve got it working I’m using nx + pnpm workspaces where storybook is installed alongside a vue3 + vite component library

Before adding storybook, an .npmrc file must be added to the root to hoist storybook deps:

# pnpm - storybook requires hoisting
public-hoist-pattern[]=*storybook*

You’ll have to pnpm i again after this change

Then follow the steps in this comment

+12
joewearing on Aug 29, 2022

storybook init - the simplest way to add a Storybook to your project

When will we stop assuming

+11
icarocapobianco on Jun 23, 2022

Any improvements in this?

+11
Nisgrak on Sep 30, 2021

The latest alpha version of storybook will now use pnpm to install dependencies when you run npx sb@next commands.

For those of you who were not able to install storybook at all (e.g. due to pnpm workspace), this should fix your issue. You can now run npx sb@next init, and you’ll get the latest storybook 7 alpha version. Unfortunately I don’t think there’s a way to install storybook 6.5 that way, but I’d encourage you to try 7.0. It has many improvements, though there still may be some disruptive changes coming before the stable release.

The other main pnpm issue is with the way storybook relies on hoisting. We’ve made some progress there, but are still working on it. For now, I think the best workaround is still to use public-hoist-pattern[]=*storybook*, or to manually install the packages that pnpm complains about into your package.json.

+10
IanVS on Oct 19, 2022

@gaetanmaisse just a mild soft ping for you here ❤️

+7
ndelangen on Feb 11, 2022

Given that pnpm is now shipped with Node along side npm and yarn, and this issue is still valid, it’s probably wise to find someone on the team willing to pick it up.

@zkochan would any of the new options around hoisting/flat enable compatibility with storybook?

+7
shellscape on Jan 9, 2022

FYI, I looked at this today and am able to reproduce.

It seems to be an issue with with @storybook/preset-create-react-app. When I run this with a vanilla react app using sb@next, it works fine.

I’ll see if I can figure out the fix for CRA this week!

@blowsie are you also using CRA?

Nope, I am using Vue, I managed to work around the problem for now using a .npmrc file.

public-hoist-pattern[]=*storybook*
public-hoist-pattern[]=*react*
public-hoist-pattern[]=*babel*

Not ideal, but it works for now and it’s better than hoisting all of the modules.

Please let me know if you wish to test any future versions 👍

+6
blowsie on Mar 30, 2022

@IanVS I realised why the public-hoist-pattern doesn’t work for me. It’s not supported for workspace dependencies which is where Storybook is failing for me https://github.com/pnpm/pnpm/issues/3642.

Still going to try the alpha and see if there’s any improvement.

+5
IPWright83 on Oct 19, 2022

For me what it worked is:

npx sb init --type vue3 -s pnpm install --shamefully-hoist

+5
hugazo on Jul 27, 2022

Some workarounds can be found in https://github.com/storybookjs/storybook/issues/12995#issuecomment-813630999

+4
octogonz on Jul 30, 2021

Works great even with pnpx command 😃 Thanks @IanVS

+3
hrasekj on Dec 30, 2022

As for npx sb init, I’ve opened https://github.com/storybookjs/storybook/pull/19425 which will detect when pnpm is in use in a project, and use it to install dependencies if so.

@IPWright83 what error are you getting, and what framework are you using?

+3
IanVS on Oct 13, 2022

Besides installation, also build failed, so, you have to explicitly hoist such dependencies.

Example .npmrc for project:

public-hoist-pattern[]=*react*
public-hoist-pattern[]=airbnb-js-shims
public-hoist-pattern[]=lodash
public-hoist-pattern[]=prop-types
public-hoist-pattern[]=deep-object-diff
public-hoist-pattern[]=markdown-to-jsx
public-hoist-pattern[]=uuid-browser
public-hoist-pattern[]=*emotion*
public-hoist-pattern[]=polished
public-hoist-pattern[]=doctrine
public-hoist-pattern[]=fast-deep-equal
public-hoist-pattern[]=ansi-to-html
public-hoist-pattern[]=telejson
public-hoist-pattern[]=regenerator-runtime
public-hoist-pattern[]=memoizerific
public-hoist-pattern[]=ts-dedent
public-hoist-pattern[]=stable
public-hoist-pattern[]=store2
public-hoist-pattern[]=util-deprecate
public-hoist-pattern[]=global
public-hoist-pattern[]=html-tags
public-hoist-pattern[]=escodegen
public-hoist-pattern[]=acorn
public-hoist-pattern[]=acorn-*
public-hoist-pattern[]=qs
public-hoist-pattern[]=overlayscrollbars
public-hoist-pattern[]=prettier
public-hoist-pattern[]=loader-utils
public-hoist-pattern[]=estraverse
public-hoist-pattern[]=refractor
public-hoist-pattern[]=color-convert
public-hoist-pattern[]=warning
public-hoist-pattern[]=isobject
+3
develar on Aug 18, 2021

FYI, I looked at this today and am able to reproduce.

It seems to be an issue with with @storybook/preset-create-react-app. When I run this with a vanilla react app using sb@next, it works fine.

I’ll see if I can figure out the fix for CRA this week!

@blowsie are you also using CRA?

+2
shilman on Mar 30, 2022

Hey @IanVS, my issue is possibly slightly different but I thought I’d be bumped here if I raised a new one. It’s a pnpm monorepo with workspaces (though just 2 packages currently) using React.

It’s the build-storybook script hitting a module not found

So it manifests in the same sort of way.

packages/react deploy-storybook: info => Manager built (37 s)
packages/react deploy-storybook: ERR! ModuleNotFoundError: Module not found: Error: Can't resolve '@chart-it/detection' in '/home/runner/work/chart-it/chart-it/packages/react/src/components/Scale'
packages/react deploy-storybook: ERR!     at /home/runner/work/chart-it/chart-it/node_modules/webpack/lib/Compilation.js:[201](https://github.com/IPWright83/chart-it/actions/runs/3241844682/jobs/5314327741#step:9:202)6:28
packages/react deploy-storybook: ERR!     at /home/runner/work/chart-it/chart-it/node_modules/webpack/lib/NormalModuleFactory.js:798:13

Slightly oddly is I can get it working locally fine (on Ubuntu) but it always fails on Windows and in CI where I’m trying to use https://github.com/storybookjs/storybook-deployer and it falls over delegating to the build-storybook call.

+1
IPWright83 on Oct 13, 2022

None of the workarounds except this one work for me, essentially disabled pnpms best feature :\

with node-linker=hoisted it should work

+1
blowsie on Mar 29, 2022

also have this problem, but if i remove @storybook/preset-create-react-app from main.js it builds fine, only with warning about preset-create-react-app

+1
Sinled on Dec 22, 2020
Read more comments on GitHub
← storybook: Not working in IE11 for new create-react-app project
storybook: npx sb extract not working as expected →