Storybook: Errors with @storybook/react v6.0.26 with Yarn 2 (Berry) Monorepo and typescript

Created on 17 Oct 2020 · 6Comments · Source: storybookjs/storybook

Bug or support request summary

_Please provide issue details here - What did you expect to happen? What happened instead?_

I have a monorepo project using Yarn Berry and Typescript.
I installed Storybook/react using the command: npx sb init

Installation happened without error but then running yarn storybook inside the package causes the following error:
Error: @storybook/core tried to access @storybook/addon-essentials, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Storybook manages to run but with all essentials plugins disabled.

I was expecting Storybook to load without errors and with plugins enabled.

Steps to reproduce

_Please provide necessary steps for reproduction of this issue. Describe the exact steps a maintainer has to take to make the problem occur. If the problem is non-trivial to reproduce, please link a repository or provide some code snippets._

_(A screencast can be useful for visual bugs, but it is not a substitute for a textual description.)_

Reproducible Repository: https://github.com/ArmandDu/monorepo-yarn2-react-typescript-storybook6-issue

note: The repository is configured with Yarn 2 No Install setup and workspace plugin.
note: I manually added core-js to the dependencies because storybook wouldn't load otherwise. (#11255)

1/ Clone the repository and go to the directory
2/ From the root repo, run yarn workspace frontend storybook

note: cd packages/frontend && yarn storybook with give the same error

Please specify which version of Storybook and optionally any affected addons that you're running

"@storybook/react": "^6.0.26"
"@storybook/addon-actions": "^6.0.26"
"@storybook/addon-docs": "^6.0.26"
"@storybook/addon-essentials": "^6.0.26"
"@storybook/addon-links": "^6.0.26"

Affected platforms

_If dependency related, please include relevant version numbers_
"@babel/core": "^7.12.3"
"@mdx-js/react": "^1.6.18"
"babel-loader": "^8.1.0"
"react-is": "^16.13.1"
"react": "^16.13.1"
"react-dom": "^16.13.1"
"core-js": "^3.6.5"

Screenshots / Screencast / Code Snippets (Optional)

info @storybook/react v6.0.26
info
info => Loading presets
WARN   Failed to load preset: {"name":"@storybook/addon-essentials","type":"presets"} on level 1
ERR! Error: @storybook/core tried to access @storybook/addon-essentials, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
ERR!
ERR! Required package: @storybook/addon-essentials (via "@storybook/addon-essentials")

.... more skipped lines ....

info => Loading config/preview file in "./.storybook".
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Using default Webpack setup.
webpack built 3e6c15753da82e4fb54b in 8571ms
⚠ ｢wdm｣: Hash: 3e6c15753da82e4fb54b
Version: webpack 4.44.2
Time: 8571ms

.... more skipped lines ....

WARNING in ./stories/Introduction.stories.mdx 11:0
Module parse failed: Unexpected token (11:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import StackAlt from './assets/stackalt.svg';
|
> <Meta title="Example/Introduction" />
|
| <style>{`
 @ \.)(?=.)[^/]*?\.stories\.mdx)$ (./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$) ./Introduction.stories.mdx
 @ ./.storybook/generated-stories-entry.js

.... more skipped lines ....

╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 6.0.26 started                          │
│   9.95 s for manager and 9.45 s for preview         │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://...:6006/               │
│                                                     │
╰─────────────────────────────────────────────────────╯

End bug report support request

PN question / support yarn / npm

Source

ArmandDu

All 6 comments

Workaround:

I changed the Yarn linker mode to "loose"

# .yarnrc.yml

pnpMode: loose

After that, running storybook prints a lot of [MODULE_NOT_FOUND] Error: but all addons manage to start

ArmandDu on 17 Oct 2020

cc @gaetanmaisse @merceyz

shilman on 18 Oct 2020

Fixed in https://github.com/storybookjs/storybook/pull/11753 which was released in v6.1.0-alpha.8

I installed Storybook/react using the command: npx sb init

Shouldn't use npx in a Yarn repo btw, they aren't compatible. Use yarn sb init instead or the dlx command if you need to download something first https://yarnpkg.com/cli/dlx#examples

merceyz on 18 Oct 2020

Hey, thanks for the help and replies!

Shouldn't use npx in a Yarn repo btw, they aren't compatible. Use yarn sb init instead or the dlx command if you need to download something first https://yarnpkg.com/cli/dlx#examples

Indeed, I followed the install doc without carefully checking for yarn dlx.

I updated the reproduction repository with install using yarn instead. The only local diff was npx added a node_modules/.cache folder but the behavior was the same.

Fixed in #11753 which was released in v6.1.0-alpha.8

I ran yarn workspace frontend exec yarn dlx sb upgrade --prerelease to test your solution but the following happened:

The upgrade script seems to rely on npm internally?
The upgrade script an Unhandled promise rejection
addons-doc cannot be found in the dependencies
Storybook manages to start with Warnings

I detailed everything here ArmandDu/monorepo-yarn2-react-typescript-storybook6-issue/tree/fix/monorepo-compatibility-storybook-6.1

To replicate the issue, checkout the main branch and run yarn workspace frontend exec yarn dlx sb upgrade --prerelease

I also created a branch to demonstrate my workaround with storybook 6.0 and pnp loose mode here: ArmandDu/monorepo-yarn2-react-typescript-storybook6-issue/tree/fix/monorepo-compatibility-storybook-6.0-pnp-loose

Note: Regarding the core-js issue, I might create a new issue as I noticed I need to install it inside the current package and also all its workspace dependencies.

ArmandDu on 19 Oct 2020

👍1

@ArmandDu Thanks for all the details provided 👍🏻

About:

ERR! Error: @storybook/addon-docs tried to access webpack (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.
ERR!
ERR! Required package: webpack (via "webpack")

It occurs because webpack isn't listed as (dev) dependency in your package but required as a peerDep by @storybook/addon-docs.

Related to the upgrade script, you're right some parts are using npx directly (for instance: https://github.com/storybookjs/storybook/blob/next/lib/cli/src/upgrade.ts#L102). I will work on making it compatible with Yarn 2.

addons-doc cannot be found in the dependencies

Multiple issues about monorepo compatibility of Storybook have been already fixed in 6.1 alphas, if you find new problems feels free to open issues and tag/assign them to me.

Storybook manages to start with Warnings

As soon as @storybook/addon-docs will be loaded properly these warnings should be gone.

We are struggling with core-js from times to times, I need to discuss with other maintainers to better know the situation on that. Hope we can do something quickly to fix that.

gaetanmaisse on 19 Oct 2020

Related to the upgrade script, you're right some parts are using npx directly (for instance: https://github.com/storybookjs/storybook/blob/next/lib/cli/src/upgrade.ts#L102). I will work on making it compatible with Yarn 2.

@gaetanmaisse If the intent of that script is to update all packages with storybook in the name then it can be replaced with