Closed pdemarino closed 1 year ago
Any pnpm
experts in the house? @merceyz ?
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
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.
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
?
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
I think my new issue is related to this actually: https://github.com/storybookjs/storybook/issues/13593
Any news on this?
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?
Some workarounds can be found in https://github.com/storybookjs/storybook/issues/12995#issuecomment-813630999
If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize!
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
Any improvements in this?
@shilman 50 upvotes is quite a few
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!
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?
with node-linker=hoisted
it should work
This might be related: https://github.com/storybookjs/storybook/pull/17375
@gaetanmaisse just a mild soft ping for you here ❤️
None of the workarounds except this one work for me, essentially disabled pnpms best feature :\
with node-linker=hoisted it should work
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?
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.
Thanks @merceyz ! You're the best 🙏
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 👍
@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 --prerelease
Many thanks!
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!
@benheymink do you have a repro you can share? if so, perhaps someone here can take a look and offer suggestions
@shilman Sure, simplest example repo here.
Steps I took to get to this stage:
npx create-react-app my-app
npx sb init
package-lock.json
filepnpm i
to generate pnpm-lock.yaml
filepnpm run storybook
or npm run storybook
You'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? ☝️
change your pnpm to npm and works just fine
This should work:
npx sb init -s
: Skip installation of dependencies on the initial scriptpnpm i
: Install by yourselfI had to do
public-hoist-pattern[]=*storybook*
to get the types for stories working. is there another way around this?
storybook init - the simplest way to add a Storybook to your project
When will we stop assuming
i just encountered the same problem +1
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...
For me what it worked is:
npx sb init --type vue3 -s
pnpm install --shamefully-hoist
I think my issue discussion#477 is related to this! Any help?
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
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.
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
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?
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?
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.
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.
@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.
@amery what do you mean it's still needed? It should work properly, if not, can you explain the issue you're having?
@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...
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.
@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.
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 app
cd app
pnpx sb-init
rm -rf node_modules
pnpm i
pnpm run storybook
Expected 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.