Not working with pnpm #13428

pdemarino · 2020-12-11T04:28:33Z

Describe the bug
Installation with pnpm doesn't work.

To Reproduce
Steps to reproduce the behavior:

In a new folder...

pnpx create-react-app app
cd app
pnpx sb-init
rm -rf node_modules
pnpm i
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.

The text was updated successfully, but these errors were encountered:

shilman · 2020-12-11T05:42:39Z

Any pnpm experts in the house? @merceyz ?

Sinled · 2020-12-22T18:15:52Z

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

kaidjohnson · 2021-01-04T19:28:11Z

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.

adrienlo · 2021-01-29T01:08:39Z

The suggestion above fixed original issue but now I get this error message:

ERROR in ./.storybook/generated-refs.js
Module build failed (from ./node_modules/.pnpm/babel-loader@8.1.0_fa474cc1763d2be32ce57156dae52dec/node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-env' from '/Users/Work/foo'
    at Function.resolveSync [as sync] (/Users/Work/foo/node_modules/.pnpm/resolve@1.18.1/node_modules/resolve/lib/sync.js:89:15)
    at resolveStandardizedName (/Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/config-chain.js:416:26)
    at /Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/config-chain.js:374:7
    at Generator.next (<anonymous>)
    at loadFileChain (/Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/config-chain.js:228:24)
    at loadFileChain.next (<anonymous>)
    at buildRootChain (/Users/Work/foo/node_modules/.pnpm/@babel/core@7.12.9/node_modules/@babel/core/lib/config/config-chain.js:97:27)
 @ multi ./node_modules/.pnpm/@storybook/core@6.1.15_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/.pnpm/@storybook/core@6.1.15_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/.pnpm/@storybook/addon-links@6.1.15_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/addon-links/dist/register.js ./node_modules/.pnpm/@storybook/addon-docs@6.1.15_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/addon-docs/dist/register.js ./node_modules/.pnpm/@storybook/addon-controls@6.1.15_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/addon-controls/dist/register.js ./node_modules/.pnpm/@storybook/addon-actions@6.1.15_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/addon-actions/dist/register.js ./node_modules/.pnpm/@storybook/addon-backgrounds@6.1.15_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/addon-backgrounds/dist/register.js ./node_modules/.pnpm/@storybook/addon-viewport@6.1.15_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/addon-viewport/dist/register.js ./node_modules/.pnpm/@storybook/addon-toolbars@6.1.15_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/addon-toolbars/dist/register.js ./.storybook/generated-refs.js main[9]

kaidjohnson · 2021-01-30T20:56:19Z

I can't reproduce that issue following a fresh install using your steps above (changing step 3 to pnpx sb init without the hyphen) and then applying the workaround for @storybook/preset-create-react-app config.

Using:
node 14.8.0
npm 6.14.7
pnpm 5.13.5

What version of pnpm and node are you running? Have you added additional configuration that references @babel/preset-env and not accounted for it in your package.json?

adrienlo · 2021-02-01T23:11:18Z

Not sure if I should create a new ticket or not but this is what's happening for me now.

$ pnpm v5.16.0
$ node v14.9.0
$ npm 6.14.8

babel config

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
  ],
  plugins: [
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-proposal-private-methods',
    [
      'babel-plugin-styled-components',
      {
        ssr: true,
        preprocess: false,
        minify: process.env.NODE_ENV === 'production',
        pure: process.env.NODE_ENV === 'production',
        fileName: process.env.NODE_ENV !== 'production',
        displayName: false,
      },
    ],
    ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
  ],
  ignore: ['node_modules', 'build'],
};

But now I get a dependency conflict:

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.44.2"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  /Users/Work/foo/node_modules/.pnpm/node_modules/webpack (version: 4.46.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

$ npm ls webpack
/Users/Work/foo
└─┬ @storybook/react@6.1.15 -> /Users/Work/foo/node_modules/.pnpm/@storybook/react@6.1.15_react-dom@17.0.1+react@17.0.1/node_modules/@storybook/react
  └── UNMET DEPENDENCY webpack@^4.44.2

npm ERR! missing: webpack@^4.44.2, required by @storybook/react@6.1.15

adrienlo · 2021-02-01T23:29:43Z

I think my new issue is related to this actually: #13593

DylanCulfogienis · 2021-05-14T17:27:57Z

Any news on this?

octogonz · 2021-07-30T00:42:24Z

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?

octogonz · 2021-07-30T00:47:32Z

Some workarounds can be found in #12995 (comment)

shilman · 2021-07-30T09:35:30Z

If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize!

develar · 2021-08-18T13:24:54Z

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

Nisgrak · 2021-09-30T08:48:47Z

Any improvements in this?

shellscape · 2021-12-08T15:46:15Z

@shilman 50 upvotes is quite a few

stale · 2022-01-09T04:17:55Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

shellscape · 2022-01-09T04:30:11Z

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?

zkochan · 2022-01-09T10:37:27Z

with node-linker=hoisted it should work

ndelangen · 2022-02-11T14:42:05Z

This might be related: #17375

ndelangen · 2022-02-11T14:42:59Z

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

blowsie · 2022-03-29T12:15:54Z

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

with node-linker=hoisted it should work

wladpaiva · 2022-10-13T11:45:27Z

For the really anxious out there, I've put together this branch that simulates it working with Vite
https://github.com/wladiston/storybook-7-vite-pnpm/tree/fix/workarounds

Couldn't get MDX files supported there so if you have MDX don't even try

IPWright83 · 2022-10-13T11:55:17Z

For the really anxious out there, I've put together this branch that simulates it working with Vite https://github.com/wladiston/storybook-7-vite-pnpm/tree/fix/workarounds

Couldn't get MDX files supported there so if you have MDX don't even try

Ah, you're not using a pnpm workspace in here?

IanVS · 2022-10-13T14:33:01Z

As for npx sb init, I've opened #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?

IPWright83 · 2022-10-13T16:38:12Z

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

Project: https://github.com/IPWright83/chart-it
Example run: https://github.com/IPWright83/chart-it/actions/runs/3241844682/jobs/5314327741

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.

IanVS · 2022-10-19T12:27:58Z

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.

IPWright83 · 2022-10-19T18:44:10Z

@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 pnpm/pnpm#3642.

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

IanVS · 2022-11-21T18:27:35Z

@amery what do you mean it's still needed? It should work properly, if not, can you explain the issue you're having?

amery · 2022-11-21T18:28:58Z

@amery what do you mean it's still needed? It should work properly, if not, can you explain the issue you're having?

on a pnpm workspace going into src/packages/foo, pnpx sb init failed claiming typescript wasn't installed...

IanVS · 2022-11-21T18:33:37Z

Yes, sb@latest (6.5) will not work. You need to use 7.0, which is still in alpha, which you can use with sb@next, as you noted. Are you just expressing displeasure that 7.0 is not stable yet? It's a big release, and we're working hard on it, but it will still be some time.

amery · 2022-11-21T18:37:12Z

@IanVS not complaining, I misread the date of the post. I thought it was October 2019 and wanted to inform newcomers the solution still applied.
I'm really sorry it sounded as a complain.

IanVS · 2022-11-21T18:42:49Z

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.

IanVS · 2022-12-30T19:25:48Z

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!

ArianHamdi · 2022-12-30T20:16:35Z

Pnpm still doesn't work for me.

Module not found: Error: Can't resolve 'style-loader'

sb : v7.0.0-beta.17
nextjs : v13.1.1
OS : windows 11

P.S : There is no problem with the Yarn

IanVS · 2022-12-30T20:35:48Z

@ArianHamdi can you please open a new issue with a link to a reproduction, so we can investigate?

hrasekj · 2022-12-30T20:49:30Z

Works great even with pnpx command :) Thanks @IanVS

ArianHamdi · 2023-01-02T00:39:44Z

@ArianHamdi can you please open a new issue with a link to a reproduction, so we can investigate?

Here is the issue : #20468

mnik01 · 2023-04-01T07:52:27Z

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

sadly falls with

mnik01 · 2023-04-01T07:57:32Z

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!

Thank you!
Worked for me just running sudo pnpm dlx sb@next init in my project. Without any tricks with .npmrc or other stuff

Haschtl · 2023-04-25T16:43:42Z

I faced an issue with the version 7 (7.0.7).
The types Meta and StoryObj - and maybe more types from @storybook/react could not be resolved completly.
I solved the issue by adding @storybook/types to the devDependencies

mjstelly · 2023-07-05T19:17:14Z

I discovered that my issue involved pnmp clashing with my installed yarn version. On Mac, I uninstalled yarn with brew uninstall yarn, them removed the yarn.lock file. I reran pnpm i, then pnpm dlx storybook@latest init. Ran without a hitch. Hope that helps someone.

jsc7727 · 2023-09-18T14:17:38Z

내 문제가 pnmp모순되고 yarn충돌하는 것과 관련이 있다는 것을 발견했습니다. Mac에서는 Yarn.lock 파일을 제거했습니다 yarn. 그럼 다시 재방송입니다 . 차질 없이 달렸습니다. 누군가에게 도움이 되길 바랍니다.brew uninstall yarn``pnpm i``pnpm dlx storybook@latest init

pnpm dlx storybook@latest init

work it.

thx :)

nctay · 2024-09-24T07:08:08Z

pnpm dlx storybook@latest init

this should be added to docs

shilman added compatibility with other tools question / support PN labels Dec 11, 2020

shilman mentioned this issue Mar 19, 2021

Storybook Init doesn't work with PNPM #14275

Closed

hyrious mentioned this issue Nov 29, 2021

[discussion]: vite is ready for storybook? netless-io/flat#1143

Closed

stale bot added the inactive label Jan 9, 2022

stale bot removed the inactive label Jan 9, 2022

shilman added has workaround todo labels Jan 13, 2022

shilman added the linear label Mar 30, 2022

mazgi mentioned this issue Oct 13, 2022

Renew the template using latest Next.js and NestJS mazgi/template.containerized-nextjs-project#10

Merged

joepio mentioned this issue Oct 24, 2022

Document UI components examples, use Storybook (or similar) atomicdata-dev/atomic-data-browser#251

Open

6 tasks

yuri-scarbaci-lenio mentioned this issue Nov 23, 2022

[Bug]: "storybook-config-entry.js doesn't exist" - building Storybook 7.0.0-alpha.52 & Angular 14 Component Library #19940

Closed

IanVS closed this as completed Dec 30, 2022

olizilla mentioned this issue Jan 18, 2023

create new w3console project storacha/w3ui#225

Closed

This was referenced Mar 17, 2023

fix(storybook): enable e2e tests nrwl/nx#15709

Merged

fix(storybook): improve and simplify e2e tests nrwl/nx#15734

Merged

kark mentioned this issue Jul 28, 2023

chore: migrate to pnpm commercetools/ui-kit#2560

Closed

Not working with pnpm #13428

Not working with pnpm #13428

Comments

pdemarino commented Dec 11, 2020 • edited Loading

shilman commented Dec 11, 2020 • edited Loading

Sinled commented Dec 22, 2020

kaidjohnson commented Jan 4, 2021

adrienlo commented Jan 29, 2021

kaidjohnson commented Jan 30, 2021 • edited Loading

adrienlo commented Feb 1, 2021

adrienlo commented Feb 1, 2021

DylanCulfogienis commented May 14, 2021

octogonz commented Jul 30, 2021

octogonz commented Jul 30, 2021

shilman commented Jul 30, 2021

develar commented Aug 18, 2021

Nisgrak commented Sep 30, 2021

shellscape commented Dec 8, 2021

stale bot commented Jan 9, 2022

shellscape commented Jan 9, 2022 • edited Loading

zkochan commented Jan 9, 2022

ndelangen commented Feb 11, 2022

ndelangen commented Feb 11, 2022

blowsie commented Mar 29, 2022

wladpaiva commented Oct 13, 2022

IPWright83 commented Oct 13, 2022

IanVS commented Oct 13, 2022

IPWright83 commented Oct 13, 2022

IanVS commented Oct 19, 2022

IPWright83 commented Oct 19, 2022

IanVS commented Nov 21, 2022

amery commented Nov 21, 2022

IanVS commented Nov 21, 2022

amery commented Nov 21, 2022

IanVS commented Nov 21, 2022

IanVS commented Dec 30, 2022 • edited Loading

ArianHamdi commented Dec 30, 2022

IanVS commented Dec 30, 2022

hrasekj commented Dec 30, 2022

ArianHamdi commented Jan 2, 2023

mnik01 commented Apr 1, 2023

mnik01 commented Apr 1, 2023

Haschtl commented Apr 25, 2023

mjstelly commented Jul 5, 2023

jsc7727 commented Sep 18, 2023

nctay commented Sep 24, 2024

pdemarino commented Dec 11, 2020 •

edited

Loading

shilman commented Dec 11, 2020 •

edited

Loading

kaidjohnson commented Jan 30, 2021 •

edited

Loading

shellscape commented Jan 9, 2022 •

edited

Loading

IanVS commented Dec 30, 2022 •

edited

Loading