[Bug] Cannot install @storybook/react #484
Comments
|
Same problem here. For us yarn v2 is unusable in production until we fix this. We really want to use berry it as it bring our install time down from 3min to 1min, but this is a biiig blocker. |
|
So the problem is that I've never used Storybook and it has a fairly intricated setup, so I'm much less likely to dig into it than in projects that I've used or have a small learning curve 🤔 I'd love to have good compatibility with it though, so if you could make a case study and list all the problems that you hit, I think we would be happy to provide help to fix what we need to in Yarn and Storybook alike. In the case described in the OP I'd suggest to run |
|
I am not sure, but I feel like there is core problem that might be related. @arcanis I'd like you to correct me if I am wrong but it seems that a common use case is not addressed by yarn berry correctly: Generic common use caseDescriptionMany tools have a config file in which you list the names of the plugins/preset/addons/loaders to use. The generic situation is that you have:
Here are the respective relevant files:
|
|
Even in Yarn 1 and npm, because of how the hoisting works, requiring unlisted packages may have different behaviours than what you'd expect (the wrong packages may end up returned by Node). Fortunately, the fix is easy: the plugins you mention just have to be loaded from the perspective of the file that lists them. There are two ways to do this:
That said, I'm not 100% sure I understand the Storybook example you mention. Is the |
|
In my example the I will try what you suggest, it might actually work! I will come back to report |
|
@crubier any progress on this? Running into the exact same issue. |
|
Nope. I let it go for now... |
|
Here is a small storybook project illustrating the problem: run the script runme.sh. |
|
Thank you @ulrik-s , I also created a repo with a detailed guide of the steps, at https://github.com/crubier/yarnv2-storybook |
|
So, I have looked briefly at Storybook support. Except of not-listed dependencies, that are easy to fix, there is a problem that Storybook does not give us full control of overriding webpack configs and uses webpack config with hardcoded P.S. Hmm, seems there is a hacky way to tweak manager webpack config for Storybook: |
|
To make @crubier repo work, the following steps need to be made:
packageExtensions:
"@storybook/core@*":
peerDependencies:
"@babel/core": "*"
"@storybook/api@*":
peerDependencies:
"regenerator-runtime": "*"
"corejs-upgrade-webpack-plugin@*":
dependencies:
core-js: ^2.6.10
babel-runtime: ^6.26.0Run to apply const PnpWebpackPlugin = require(`pnp-webpack-plugin`);
async function yarn2Config(config, options) {
const newConfig = {
...(config || {}),
resolve: {
...((config || {}).resolve || {}),
plugins: [
...(((config || {}).resolve || {}).plugins || []),
PnpWebpackPlugin
]
},
resolveLoader: {
...((config || {}).resolveLoader || {}),
plugins: [
...(((config || {}).resolveLoader || {}).plugins || []),
PnpWebpackPlugin.moduleLoader(module)
]
}
};
const jsRule = newConfig.module.rules.find((rule) => rule.test.test('.js'));
jsRule.exclude = /node_modules/;
return newConfig;
}
module.exports = { managerWebpack: yarn2Config, webpack: yarn2Config };This ensures that should work now. P.S. The comment was updated to incorporate fixes below. |
|
@larixer I just tried the solution you suggested in your last comment. I end up with a new error. It's described here https://github.com/crubier/yarnv2-storybook#fix-using-larixer-method I am on MacOS, if this is relevant. The error: |
|
@crubier Hmm, I'm on OS X as well, strangely I didn't saw this problem. But you can easily work around it by doing |
|
@larixer I now get: Sorry... I promise I follow orders 100% ! I updated the repo |
|
@crubier Hmm, yes, now I see these problems on your repo. Try to update |
|
It did work finally! Well done @larixer ! Commiting the solution to the repo. |
Describe the bug
When I am trying to install @storybook/react and its dependencies I run into a set of problems.
In the end I get the error message below and I cannot seem to get around it.
ERROR in ./.storybook/config.js
Module build failed (from /Users/ulrik/src/yggio/.yarn/virtual/babel-loader-virtual-b421e08490/0/cache/babel-loader-npm-8.0.6-b4a2ea362a.zip/node_modules/babel-loader/lib/index.js):
Error: A package is trying to access a peer dependency that should be provided by its direct ancestor but isn't
Required package: @babel/core (via "@babel/core")
Required by: @babel/plugin-proposal-object-rest-spread@virtual:e347a02eb7999f59b9507600cb34a62b402298c3fca9aeec44e47713ae88277fcc649e780bc2f48576f09c86d7d70beaba4f6010ab17d4b769fc44e6f8e5b033#npm:7.4.4 (via /Users/ulrik/src/yggio/.yarn/virtual/@babel-plugin-proposal-object-rest-spread-virtual-fd98db776c/0/cache/@babel-plugin-proposal-object-rest-spread-npm-7.4.4-49552a88c8.zip/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js)
A clear and concise description of what the bug is.
Symptom is that Storybook does not start up properly.
To Reproduce
Follow these instructions: https://storybook.js.org/docs/guides/guide-react/
//
// Added these to the workspace
//
yarn add babel-loader @babel/core
yarn add @storybook/react
yarn add pnpify
yarn add yarnpkg-pnpify
yarn add @yarnpkg/pnpify
yarn unplug @storybook/core
//
// Added these to the root package.json
//
yarn add babel-runtime
yarn add core-js
yarn add regenerator-runtime
yarn unplug core-js
<create .storybook/config.js>
<create .src/index.stories.js>
yarn pnpify start-storybook
The minimal information needed to reproduce your issue (ideally a package.json with a single dep).
Note that bugs without minimal reproductions might be closed.
Screenshots
If applicable, add screenshots to help explain your problem.
Environment if relevant (please complete the following information):
Additional context
Add any other context about the problem here.
The text was updated successfully, but these errors were encountered: