Yarn 2: Support Yarn v2 "Berry"

Describe the bug

If you use Yarn v2, then you can’t add Storybook to a simple Create React App, it crashes.

See https://github.com/yarnpkg/berry/issues/592#issuecomment-575895264

And the output here:

https://github.com/crubier/berry/commit/78acb633a0ad411ed173dae0a0037ab82fe346ad/checks?check_suite_id=407781418

To Reproduce

The following process is used in the workflow to reproduce this bug:

1. Install yarn v2: https://next.yarnpkg.com/getting-started/install
2. yarn dlx create-react-app my-cra && cd my-cra to init a crat react app
3. yarn dlx -p @storybook/cli sb init to init storybook, but it fails here
4. Then I would do yarn storybook and that would be it… ideally…

Expected behavior

Success

Screenshots

Error: Cannot find module 'commander'
Require stack:
- /Users/vincent/.yarn/berry/cache/@storybook-cli-npm-5.3.6-c196adf18e-1.zip/node_modules/@storybook/cli/bin/generate.js
- /Users/vincent/.yarn/berry/cache/@storybook-cli-npm-5.3.6-c196adf18e-1.zip/node_modules/@storybook/cli/bin/index.js
Require stack:
- /Users/vincent/.yarn/berry/cache/@storybook-cli-npm-5.3.6-c196adf18e-1.zip/node_modules/@storybook/cli/bin/generate.js
- /Users/vincent/.yarn/berry/cache/@storybook-cli-npm-5.3.6-c196adf18e-1.zip/node_modules/@storybook/cli/bin/index.js
    at Proxy.module_1.Module._resolveFilename (/private/var/folders/2g/yhlpschd00n71jykx6bgbp1w0000gn/T/tmp-69185QMHt9oBf5169/dlx-69185/.pnp.js:18118:54)
    at Proxy.module_1.Module._load (/private/var/folders/2g/yhlpschd00n71jykx6bgbp1w0000gn/T/tmp-69185QMHt9oBf5169/dlx-69185/.pnp.js:18001:40)
    at Object.<anonymous> (/Users/vincent/.yarn/berry/cache/@storybook-cli-npm-5.3.6-c196adf18e-1.zip/node_modules/@storybook/cli/bin/generate.js:1)
    at Generator.next (<anonymous>)

System:

➜ npx -p @storybook/cli@next sb info

Environment Info:

  System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 2.0.0-rc.23 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 71.0
    Safari: 13.0.4

Additional context Trying to make Storybook work with yarn v2

[gaetanmaisse]

With Storybook 6.0.0-alpha.6+ SB & Yarn 2 are working together for simple config, as in repro repo provided by @crubier 🎉

I still need to work on:

• Making yarn dlx -p @storybook/cli sb init works, to have out of the box support:
  • PR: https://github.com/storybookjs/storybook/pull/9807
  • PR: https://github.com/storybookjs/storybook/pull/9866
• Updating @storybook/preset-create-react-app. it’s currently resolving react-script in node_modules/.bin/ directory, so I need to add one more check for SB PnP user and access webpack config file directly in the .zip file with PnP API.
  • PR: https://github.com/storybookjs/presets/pull/104
• Checking that all addons are working with the latest alpha of SB 6:
  • PR : https://github.com/storybookjs/storybook/pull/10613

    - ✅ A11y
    - ✅ Actions
    - ✅ Backgrounds
    - ✅ CSS Resources
    - ✅ Design Assets
    - 🚧 Docs
    - 🚧 Essential
    - ✅ Events
    - ✅ Google Analytics
    - ✅ GraphQL
    - ✅ Jest
    - ✅ Knobs
    - ✅ Links
    - ✅ Query Params
    - 🤷‍♂ Storyshots
    - ✅ Storysource
    - ✅ Toolbars
    - ✅ Viewport

• Finding a way of adding examples with Yarn 2 inside SB monorepo. Maybe creating some GitHub actions as it is done on Yarn 2 repo can be a good idea because it really mimics the users’ behaviors: https://github.com/yarnpkg/berry/blob/master/.github/workflows/e2e-jest-workflow.yml

  • PR: https://github.com/storybookjs/storybook/pull/9866
  • Yarn 2 will be fully integrated into the new E2E tests: https://github.com/storybookjs/storybook/pull/10447

• Handle .storybook/preview.js file properly . See https://github.com/storybookjs/storybook/issues/10094

  • PR: https://github.com/storybookjs/storybook/pull/10305

@ndelangen For the cache folder, I put it in node_modules/.cache/@storybook for now. An enhancement issue has been created by @arcanis in Yarn Org https://github.com/yarnpkg/berry/issues/918 to discuss the usefulness, pros, and cons of creating and maintaining a cache pkg in the Yarn org. If it ends on the creation of a such package we will surely use it instead of our custom resolve-path-in-sb-cache.js.

[gaetanmaisse]

Current situation about the compatibility with Yarn 2 (a.k.a Berry)

@crubier created a repo explaining how to make SB works with Yarn Berry: https://github.com/crubier/yarnv2-storybook, the workaround is to:

• Unplug @storybook/core, for details see https://next.yarnpkg.com/cli/unplug -> yarn unplug @storybook/core
• Create a node_modules folder to be able to create SB Babel cache folder -> mkdir node_modules
• Create a preset to define a custom webpack config that uses Plug’n’Play resolver for Webpack.

Based on this repo and comments, multiple points need to be addressed to make SB works with Yarn Berry out of the box. There are my thoughts about that:

1. It looks like @storybook/core needs to be unplugged because it writes something inside itself. This is working with classical/legacy yarn because node_modules/@storybook/core is a folder with writable rights. In Yarn Berry, packages are read-only so no more writings allowed:

   Packages are now kept within their cache archives. For safety and to prevent cache corruptions, those archives are mounted as read-only drives and cannot be modified under normal circumstances

   So we need to find which part of @storybook/core is writing something and update this behavior. Sadly for us @storybook/core is (one of) the last packages still in JS.

2. As there is no node_modules folder anymore, we need to find another place to put SB Babel cache. The file managing this is https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/common/babel-cache-preset.js and it should be pretty easy to fallback/move to another cache folder. However, I didn’t find any wide used convention for where should be the cache folder for now (some package like Babel have a fallback to os.tmp(), webpack has changed it here…), so I think we need to discuss that.

3. Update the base webpack config to include Plug’n’Play resolver if the user is using Yarn Berry (in a more global point of view is using Plug’n’Play i.e. there is a pnp.js file in its project)

   OR

   Create a preset to handle this out of @storybook/core as it is affecting only a part of SB users. Something like what @igor-dv and @crubier started there: https://github.com/storybookjs/presets/pull/18 (which is only working for TS users).

   My personal opinion is that we should consider adding the Plug’n’Play resolver in SB core as Yarn Berry is now the “stable” version (yarn as we are used to is now legacy). More and more SB users will be using Yarn Berry and SB should work with it without any additional setup. According to https://github.com/nodejs/docker-node/issues/1180, Yarn Berry will/should be the default version ship with Node 14 Docker Image.

Here is a link of Introducing Yarn 2 article written by its main maintainer.

Any feedback on all this is welcome! @crubier @igor-dv @ndelangen @shilman and anyone else 😃