Core: Add Yarn 2 compatibility #9667

gaetanmaisse · 2020-01-28T21:18:22Z

Issue:
Part of #9527

🏗 Some changes will also be needed on CRA preset to make it compatible.

What I did

Move Webpack default outputDir outside @storybook/core package
Improve management of cache directory
Update Webpack configuration to handle PnP correctly
Add missing or fix implicit transitive peerDependencies

How to test

Checkout the branch locally, compile @storybook/core
Follow https://github.com/crubier/yarnv2-storybook
In the package.json file add your local version of @storybook/core:

  "resolutions": {
    "@storybook/core": "portal:/PATH_TO_SB/lib/core"
  }

yarn install
yarn storybook and 🎉🎉

--
Does this need a new example in the kitchen sink apps?
--> I think so, but for now, I didn't find a way to use Yarn v2 on some project of our Yarn v1 workspace.

shilman · 2020-01-29T00:04:01Z

Love this @gaetanmaisse !!!

Can you reuse an existing example?

gaetanmaisse · 2020-01-29T21:00:24Z

@shilman maybe cra-kitchen-sink or html-kitchen-sink because they both have a simple configuration with no presets. What's your point of view?

I still need to do a few more tests before setting this PR as ready but I think there will not be many more code changes on @storybook/core side 😉. Also, I started to look at the presets side (as CRA TS is not working for now):

✅ @storybook/preset-typescript works without any change.
🏗 @storybook/preset-create-react-app will need some updates. It's currently resolving react-script in node_modules/.bin/ directory (see here), 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.

shilman · 2020-01-30T09:33:03Z

Yeah I’d say do both! CRA because it’s kind of “special” and one of the others to have a “normal” example. Would be nice to have one that tests typescript support too. If this is the future of yarn, doing a few should be fine. As long as we also have a few old-style examples around too

gaetanmaisse · 2020-02-02T09:45:48Z

I open this PR because with these commits everything should be OK for Yarn 2 & Storybook compatibility on simple projects. ⚠️ For now @storybook/preset-create-react-app is not working and I haven't tried all addons.

@shilman I didn't find a way to use Yarn 2 on only some projects of our Yarn v1 workspace. As soon as this PR will be merged and released I will add an e2e test on Yarn 2 repo matching the scenario given in the issue.

Then I will work on:

Updating @storybook/preset-create-react-app. it's currently resolving react-script in node_modules/.bin/ directory (see here), 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.
Checking that all addons are working with the alpha of SB 6.0 that will release this PR.
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

shilman · 2020-02-02T10:18:36Z

@gaetanmaisse This is really awesome work -- will be so great to announce this as part of the 6.0 release. 🤩🤩🤩

I'm not tracking the yarn 2 situation closely, but based on my limited understanding, we will need to support both yarn 1 and 2 for the foreseeable future. Therefore here's my strawman proposal, assuming that yarn 2 will be the primary use case moving forward, and yarn 1 will be the secondary:

Let's convert the monorepo to yarn 2.
Let's use the storybookjs/deprecated-addons repo as a yarn 1 test case.

What do you think? Alternatively, if I got the primary/secondary cases wrong, we can flip the proposal.

NOTE: To clarify, what I'm proposing is followup work, and not required for this PR. 😃

shilman · 2020-02-02T10:29:27Z

addons/contexts/package.json

@@ -41,7 +41,20 @@
    "qs": "*",
    "rax": "*",
    "react": "*",
-    "vue": "*"
+    "vue": "*",


@gaetanmaisse this PR somehow got removed: #7675

Do you think I should reapply that first before this PR? Would it change this part of this PR?

I think we can keep it as it is and as it will be with this PR, from my point of view it's more semantically correct to have preact, rax and vue listed as peerDep as we are importing them in the source code of addon-context (in addons/contexts/preview/framework). Adding the peerDependenciesMeta info will prevent any npm/yarn warning about missing dep which was the main point of #7625 and #7625 (comment).

gaetanmaisse · 2020-02-02T19:04:01Z

@shilman I like your proposal! I will add to my todo list to investigate it 🕵 .

It is maybe a bit too ambitious to migrate our workspace to Yarn 2 right now because:

we don't have any feedback of big projects using it
I'm only playing with it on small personal projects for a few days

Anyway, I will take a look at what is possible and I will share my feedback and thoughts 😉

shilman

LGTM. Could use confirmation from @ndelangen or somebody else who's more familiar with the situation.

…ook cache directory `find-cache-dir` is not used anymore because it returns `undefined` when there is no `node_modules` folder at project root, as in projects managed with Yarn 2.

…irs in cache

…kage folder to SB cache folder Using Yarn 2 packages are read only, and more globally it's better to not alter the package with its own execution, so the output is moved outside the packages.

Add PnpWebpackPlugin in manager and preview webpack configurations

Yarn 2 introduce an error for this during `yarn install`: YN0002 - MISSING_PEER_DEPENDENCY For details see https://dev.to/arcanis/implicit-transitive-peer-dependencies-ed0 TL;DR: If you write a package that depends on Foo, and if Foo has a peer dependency, then you must provide it in either of the dependencies or peerDependencies fields. You won't "implicitly inherit" the peer dependencies declared in Foo.

gaetanmaisse added compatibility with other tools feature request yarn / npm Yarn / npm acting weird labels Jan 28, 2020

gaetanmaisse mentioned this pull request Feb 2, 2020

Storybook fails to boot with TypeError when it can't write to node_modules #9696

Closed

gaetanmaisse force-pushed the add-yarn-2-compatibility branch from 31da6b2 to f938709 Compare February 2, 2020 09:13

gaetanmaisse marked this pull request as ready for review February 2, 2020 09:45

gaetanmaisse requested review from alexandrebodin, alterx, CodeByAlex, igor-dv, jbovenschen, kazupon, leonrodenburg, thani-sh, ndelangen, renaudtertrais, saponifi3d, theinterned, thomasbertet, tmeasday, usulpro and z4o4z as code owners February 2, 2020 09:45

shilman reviewed Feb 2, 2020

View reviewed changes

shilman approved these changes Feb 3, 2020

View reviewed changes

gaetanmaisse added 5 commits February 4, 2020 07:44

feat(core): create a function to resolve path of a file/dir in storyb…

8b4fe4f

…ook cache directory `find-cache-dir` is not used anymore because it returns `undefined` when there is no `node_modules` folder at project root, as in projects managed with Yarn 2.

refactor(core): avoid duplication of code used to get path of files/d…

b46444e

…irs in cache

feat(core): move webpack default output from storybook/core own pac…

8af8666

…kage folder to SB cache folder Using Yarn 2 packages are read only, and more globally it's better to not alter the package with its own execution, so the output is moved outside the packages.

feat(core): update webpack config to handle Yarn PnP mode out of the box

782bf45

Add PnpWebpackPlugin in manager and preview webpack configurations

gaetanmaisse force-pushed the add-yarn-2-compatibility branch from 33864ca to a978bd2 Compare February 4, 2020 06:45

shilman added this to the 6.0.0 milestone Feb 4, 2020

shilman changed the title ~~Add Yarn 2 compatibility~~ Core: Add Yarn 2 compatibility Feb 4, 2020

shilman merged commit 05e66cb into next Feb 4, 2020

shilman deleted the add-yarn-2-compatibility branch February 4, 2020 08:43

gaetanmaisse mentioned this pull request Feb 25, 2020

Pnp continue storybookjs/presets#18

Closed

voxpelli mentioned this pull request Apr 14, 2020

Back port peer dependency fixes to 5.x? #10425

Closed

gaetanmaisse mentioned this pull request Jun 11, 2020

'yarn start-storybook' creates node_modules/.cache in Yarn 2 PnP project #11113

Closed

dependencies bot mentioned this pull request Jan 15, 2021

Update 35 dependencies from npm #2429

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Core: Add Yarn 2 compatibility #9667

Core: Add Yarn 2 compatibility #9667

gaetanmaisse commented Jan 28, 2020 •

edited

Loading

shilman commented Jan 29, 2020 •

edited

Loading

gaetanmaisse commented Jan 29, 2020 •

edited

Loading

shilman commented Jan 30, 2020

gaetanmaisse commented Feb 2, 2020

shilman commented Feb 2, 2020 •

edited

Loading

shilman Feb 2, 2020

gaetanmaisse Feb 2, 2020

shilman Feb 2, 2020

gaetanmaisse commented Feb 2, 2020

shilman left a comment

Core: Add Yarn 2 compatibility #9667

Core: Add Yarn 2 compatibility #9667

Conversation

gaetanmaisse commented Jan 28, 2020 • edited Loading

What I did

How to test

shilman commented Jan 29, 2020 • edited Loading

gaetanmaisse commented Jan 29, 2020 • edited Loading

shilman commented Jan 30, 2020

gaetanmaisse commented Feb 2, 2020

shilman commented Feb 2, 2020 • edited Loading

shilman Feb 2, 2020

Choose a reason for hiding this comment

gaetanmaisse Feb 2, 2020

Choose a reason for hiding this comment

shilman Feb 2, 2020

Choose a reason for hiding this comment

gaetanmaisse commented Feb 2, 2020

shilman left a comment

Choose a reason for hiding this comment

gaetanmaisse commented Jan 28, 2020 •

edited

Loading

shilman commented Jan 29, 2020 •

edited

Loading

gaetanmaisse commented Jan 29, 2020 •

edited

Loading

shilman commented Feb 2, 2020 •

edited

Loading