shilman
commented
3 years ago Any pnpm experts in the house? @merceyz ?
Closed pdemarino closed 1 year ago
shilman
commented
3 years ago Any pnpm experts in the house? @merceyz ?
Sinled
commented
3 years ago 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
commented
3 years ago 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
commented
3 years ago 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]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
commented
3 years ago 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.8babel 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.15I think my new issue is related to this actually: https://github.com/storybookjs/storybook/issues/13593
DylanCulfogienis
commented
3 years ago Any news on this?
octogonz
commented
3 years ago 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
commented
3 years ago Some workarounds can be found in https://github.com/storybookjs/storybook/issues/12995#issuecomment-813630999
shilman
commented
3 years ago If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize!
develar
commented
3 years ago 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
commented
3 years ago Any improvements in this?
shellscape
commented
2 years ago @shilman 50 upvotes is quite a few
stale[bot]
commented
2 years ago 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
commented
2 years ago 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
commented
2 years ago with node-linker=hoisted it should work
ndelangen
commented
2 years ago This might be related: https://github.com/storybookjs/storybook/pull/17375
ndelangen
commented
2 years ago @gaetanmaisse just a mild soft ping for you here ❤️
blowsie
commented
2 years ago None of the workarounds except this one work for me, essentially disabled pnpms best feature :\
with node-linker=hoisted it should work
shilman
commented
2 years ago 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?
merceyz
commented
2 years ago It seems to be an issue with with @storybook/preset-create-react-app. https://github.com/storybookjs/storybook/issues/13428#issuecomment-1082566162
@shilman I noticed some dependency issues with that package in https://github.com/yarnpkg/berry/pull/3004 (specifically https://github.com/yarnpkg/berry/commit/a7fd51af9b9ef70a26163d6b457bb4fd83012674), I've been meaning to open a PR to fix it but haven't gotten around to it yet. Hopefully this helps in figuring out what the issue is.
shilman
commented
2 years ago Thanks @merceyz ! You're the best 🙏
blowsie
commented
2 years ago 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 usingsb@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 👍
shilman
commented
2 years ago @blowsie any chance you can try out the latest prerelease? i've made a bunch of improvements to addon-docs dependency structure which might solve things (no promises):
npx sb upgrade --prereleaseMany thanks!
benheymink
commented
2 years ago Any update on this? We recently migrated to PNPM (on a CRA bootstrapped project) and have found ourselves with a broken Storybook....if there is a fix somewhere obvious I'm happy to throw in a pair of hands!
shilman
commented
2 years ago @benheymink do you have a repro you can share? if so, perhaps someone here can take a look and offer suggestions
benheymink
commented
2 years ago @shilman Sure, simplest example repo here.
Steps I took to get to this stage:
npx create-react-app my-appnpx sb initpackage-lock.json filepnpm i to generate pnpm-lock.yaml filepnpm run storybook or npm run storybookYou'll be met with the error:
❯ npm run storybook
> my-app@0.1.0 storybook
> start-storybook -p 6006 -s public
info @storybook/react v6.4.22
info
(node:15923) DeprecationWarning: --static-dir CLI flag is deprecated, see:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Serving static files from ./public at /
info => Loading Webpack configuration from `node_modules`
info => Removing existing JavaScript and TypeScript rules.
ERR! Error: Cannot find module '/Users/benheymink/Dev/my-app/node_modules/config/webpack.config'
ERR! Require stack:
ERR! - /Users/benheymink/Dev/my-app/node_modules/.pnpm/@storybook+preset-create-react-app@4.1.0_4bc306ed27987c5ddb296071fdd1e2ac/node_modules/@storybook/preset-create-react-app/dist/index.js@mrmckeb is this something we can fix in the CRA preset? ☝️
grinsteindavid
commented
2 years ago change your pnpm to npm and works just fine
BerkeKaragoz
commented
2 years ago This should work:
npx sb init -s: Skip installation of dependencies on the initial scriptpnpm i: Install by yourself
kelly-tock
commented
2 years ago I had to do
public-hoist-pattern[]=*storybook*to get the types for stories working. is there another way around this?
asasvirtuais
commented
2 years ago storybook init - the simplest way to add a Storybook to your project
When will we stop assuming
alexn-s
commented
2 years ago i just encountered the same problem +1
moparlakci
commented
2 years ago the correct command for pnpm should be
pnpm dlx sb init
storybook init - the simplest way to add a Storybook to your project.
• Installing Storybook for user specified project type: react. ✓
• Adding Storybook support to your "React" app
npm ERR! Cannot read properties of null (reading 'matches')cannot match something but what..
and it still uses npm in the background...And crashes So not working yet...
hugazo
commented
2 years ago For me what it worked is:
npx sb init --type vue3 -s
pnpm install --shamefully-hoist
singhinderpal
commented
2 years ago I think my issue discussion#477 is related to this! Any help?
joewearing
commented
2 years ago 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
IPWright83
commented
2 years ago Hi @shilman, you marked this as has workaround. Can I ask what that is as I can't get it working following any of the advice in this thread. I've tried:
--shamefully-hoist on an install
public-hoist-pattern[]=*storybook* in my .npmrc file
node-linker=hoisted in my .npmrc file
All of them fail on a build-storybook in exactly the same way.
wladpaiva
commented
2 years ago 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
commented
2 years ago 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
commented
2 years ago 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?
IPWright83
commented
2 years ago 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:13Slightly 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
commented
2 years ago 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
commented
2 years ago @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.
IanVS
commented
1 year ago @amery what do you mean it's still needed? It should work properly, if not, can you explain the issue you're having?
amery
commented
1 year ago @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
commented
1 year ago 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
commented
1 year ago @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
commented
1 year ago 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.
Describe the bug Installation with pnpm doesn't work.
To Reproduce Steps to reproduce the behavior:
In a new folder...
pnpx create-react-app appcd apppnpx sb-initrm -rf node_modulespnpm ipnpm run storybookExpected behavior Starts normally.
Screenshots
System
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 withcra-config.ts, which can't resolve the location of the package.