Build: Upgrade to Yarn 3

[gaetanmaisse]

What I did

• Upgraded to Yarn 3 (-> specific version, see Build: Upgrade to Yarn 3 #15682 (comment))
• Add a missing dep in @storybook/core-common
• Remove unneeded @types dependency
• Simplify Yarn config in web-components-kitchen-sink

How to test

• CI should be 🟢
• Checkout this branch and try to run:
  - yarn bootstrap --core
  - cd examples/official-storybook && yarn && yarn storybook
  - cd ../web-components-kitchen-sink && yarn && yarn storybook

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit c316086. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[gaetanmaisse]

The WC example, using a fancy portal: config doesn't agree with this upgrade 🙈

➤ YN0001: │ Error: Assertion failed: Writing attempt prevented to /tmp/storybook/addons/storyshots/storyshots-core/node_modules/@jest/transform which is outside project root: /tmp/storybook/examples/web-components-kitchen-sink
    at lB (/tmp/storybook/.yarn/releases/yarn-3.0.0.cjs:558:1626)
    at Hie (/tmp/storybook/.yarn/releases/yarn-3.0.0.cjs:558:2199)
    at Rje (/tmp/storybook/.yarn/releases/yarn-3.0.0.cjs:558:6585)
    at Uie.finalizeInstall (/tmp/storybook/.yarn/releases/yarn-3.0.0.cjs:543:24938)
    at async Fe.linkEverything (/tmp/storybook/.yarn/releases/yarn-3.0.0.cjs:303:13759)
    at async /tmp/storybook/.yarn/releases/yarn-3.0.0.cjs:306:4326
    at async xe.startTimerPromise (/tmp/storybook/.yarn/releases/yarn-3.0.0.cjs:275:3730)
    at async Fe.install (/tmp/storybook/.yarn/releases/yarn-3.0.0.cjs:306:4102)
    at async /tmp/storybook/.yarn/releases/yarn-3.0.0.cjs:348:14731
    at async Function.start (/tmp/storybook/.yarn/releases/yarn-3.0.0.cjs:275:2287)
➤ YN0000: └ Completed in 1s 317ms
➤ YN0000: Failed with errors in 7s 603ms

[gaetanmaisse]

I had to set fixed versions because there are some incompatible versions range due to our webpack 4 & 5 mix in the monorepo (should be cleaned in SB 7)

[larixer]

It is a bug in the node-modules linker, I didn't foresee that situations like this might happen with portals. I am going to submit a fix, however it will require a bit of work. The problem is that there are two different versions of @jest/transform in the dependency graph: 26.6.2 used by storyshots-core and 27.0.6 used by jest-core and babel-jest, etc. You can see this by running yarn why @jest/transform. Unfortunately @jest/transform@27.0.6 gets hoisted first to web-components-kitchen-sink/node_modules/@jest/transform and it blocks the way for @jest/transform@26.6.2 , thats why nm linker tries to place @jest/transform@26.6.2 inside storybook/addons/storyshots/storyshots-core/node_modules/@jest/transform, but this attempt is rightfully blocked by assertion - we don't want to write inside portals for security reasons.
The fix would be to give a priority to direct portal dependencies above all other dependencies, so that @jest/transform@26.6.2 be placed inside web-components-kitchen-sink/node_modules/@jest/transform first.

Until the nm linker fix lands, the workaround might be to reduce the number of @jest/transform versions used, if possible. I will update you when the fix will be ready.

[larixer]

The fix is available here:
yarnpkg/berry#3183
Angular E2E tests are failing, but its not our fault (they use incorrect semver at the moment for published packages, they fixed this, but not published yet):
angular/angular-cli#21413

I have checked the fix on this branch and install finished without errors. To try the fix you can run:
yarn set version from sources --branch 3183
I'm going to add an integration test to this PR to prevent regressions

[gaetanmaisse]

Awesome @larixer 👏🏻 ! I will update this PR with the provided "version" later today

[gaetanmaisse]

E2E statuses:

• Angular -> Incorrect semver ranges used for new projects (~12.2.0-) angular/angular-cli#21413
• CRA/WC/Lit2 etc -> Same error than the one from next, issue with side menu, to investigate

[shilman]

Great stuff @gaetanmaisse 🚀

[larixer]

@gaetanmaisse FYI, I have tried to enable usage of hardlinks by Yarn 3 inside node_modules via nmMode: hardlinks-local setting, and the total Stroybook size on disk went from 3.3G to 2.3G for me while yarn bootstrap --core && cd examples/official-storybook && yarn && yarn storybook succeeded. Usage of hardlinks inside node_modules does not have performance cost and theoretically should not break anything, but your mileage may vary, of course.