[Docs] yarn berry installation

[fulldecent]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

The install documentation explains how to set up with yarn.

Please also explain how to set up with yarn berry.

Motivation and context

This setup is non-trivial. I am several days into learning the difference between sass/sass-loader and how to make it work with Yarn Berry.

Good documentation here might help many people.

Also

That page links to https://github.com/twbs/bootstrap-npm-starter which is archived and it references Node SASS which is also archived.

Perhaps this further illustrates how non-trivial this is.

[robin-ostertag]

+1

[mdo]

Near as I can tell, Yarn's berry repo is just... Yarn?

See https://getbootstrap.com/docs/5.3/getting-started/download/#yarn for latest docs, and https://github.com/twbs/examples/tree/main/sass-js for more updated examples.

[fulldecent]

Here is what happens when you follow those instructions:

➡️ ~/Desktop
git clone https://github.com/twbs/examples.git

➡️ ~/Desktop
cd examples/sass-js/

➡️ ~/Desktop/examples/sass-js main
nvm install --lts && nvm use --lts

➡️ ~/Desktop/examples/sass-js main 8s
corepack enable     

➡️ ~/Desktop/examples/sass-js main
yarn set version stable

➡️ ~/Desktop/examples/sass-js main*
git diff | cat   
diff --git a/package.json b/package.json
index 3cde257..b5e6273 100644
--- a/package.json
+++ b/package.json
@@ -4,5 +4,6 @@
   "version": "0.0.0",
   "private": true,
   "repository": "twbs/examples",
-  "license": "MIT"
+  "license": "MIT",
+  "packageManager": "[email protected]"
 }

➡️ ~/Desktop/examples/sass-js main*
yarn                                      

Usage Error: The nearest package directory (/Users/williamentriken/Desktop/examples/sass-js) doesn't seem to be part of the project declared in /Users/williamentriken/Desktop/examples.

- If /Users/williamentriken/Desktop/examples isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If /Users/williamentriken/Desktop/examples is intended to be a project, it might be that you forgot to list sass-js in its workspace configuration.
- Finally, if /Users/williamentriken/Desktop/examples is fine and you intend sass-js to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.

$ yarn install [--json] [--immutable] [--immutable-cache] [--refresh-lockfile] [--check-cache] [--check-resolutions] [--inline-builds] [--mode #0]

[julien-deramond]

Here is what happens when you follow those instructions:

Just tried it real quick, I haven't got any issues by doing the following:

git clone https://github.com/twbs/examples.git
cd examples
yarn install
yarn start

It created automatically a yarn.lock (as it's supposed to, instead of the package-lock.json), and launched the server at localhost:4200.

Am I missing something here?

[fulldecent]

@julien-deramond can you please do yarn --version? You may be running Yarn v1 which is the old one which is not Yarn Berry.

[julien-deramond]

My bad, I thought I had the latest version, I had by default the v1. Thanks @fulldecent for pointing it out.
So in order to make it work:

1. git clone https://github.com/twbs/examples.git, then cd examples/sass-js
2. Configure yarn to continue using node_modules

yarn config set nodeLinker node-modules

This will create a .yarnrc.yml containing nodeLinker: node-modules.

3. Then, create an empty yarn.lock

4. yarn install

5. yarn start

If we modify this section of the documentation to mention that, would it be OK? I mean, without using Yarn Plug'n'Play

[fulldecent]

Thank you, this is super helpful, I really appreciate it.

These are magic little lines of code that can be really hard to find so it is great to see them together.

Perhaps when we update the documentation, we can put this as yarn Berry, but then also keep the old yarn 1.X below it.

[julien-deramond]

FYI, I've created #41036 just to mention this "trick" to compile our examples with Yarn Berry in the documentation. It's probably better than nothing already, :) let's continue the discussion in the PR if needed.