Add new warning for users with both yarn and npm installed

[munozr1]

I have added the warning thats on the react-native github (https://github.com/react-native-community/cli/blob/main/docs/init.md#using-npx-utility) onto the website. I got stuck here and had to ask stackoverflow. Having this info on the website would have saved me hours.
https://stackoverflow.com/questions/76030622/react-native-unable-to-download-template/76032088#76032088

[facebook-github-bot]

Hi @munozr1!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[netlify]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	3d67599
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/643f468b0ef88400083eb800
😎 Deploy Preview	https://deploy-preview-3689--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[cortinico]

Having this info on the website would have saved me hours.

Can you clarify on why you needed --npm. I personally have both installed and never had such issues

[munozr1]

Having this info on the website would have saved me hours.

Can you clarify on why you needed --npm. I personally have both installed and never had such issues

I'm not sure why on my environment i require the --npm when having both yarn and npm installed. I just know that adding the --npm flag allows me to successfully download the default template. Everytime, without fail, not having the flag fails to donwload the default template. the details of the err and how I got the solution are here:
https://stackoverflow.com/questions/76030622/react-native-unable-to-download-template/76032088#76032088

Is there any information i can provide you to better understand the problem?

versions:
node 18.12.1
npm 9.3.0
yarn 3.2.3

[cortinico]

Is there any information i can provide you to better understand the problem?

Which commands are you running specifically?

[munozr1]

Which commands are you running specifically?

Im simply using the command written in the docs website.

I follow these instructions for macOS and iOS exactly as shown
https://reactnative.dev/docs/environment-setup

Problem Command:
npx react-native@latest init AwesomeProject

Solution Command:
npx react-native@latest init AwesomeProject --npm

[cortinico]

mmm that's interesting. Could you copy the error message you're having?

[blakef]

+1 to Nico's ask here, I'm interested to see what happened there @munozr1.

[munozr1]

mmm that's interesting. Could you copy the error message you're having?

Running command without --verbose flag

✔ Downloading template ✖ Copying template error Error: Couldn't find the "/var/folders/8x/y10dxy554tzb5d5d2tv_rffh0000gn/T/rncli-init-template-a0bsiD/node_modules/react-native/template.config.js file inside "react-native" template. Please make sure the template is valid. Read more: https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template. Error: Error: Couldn't find the "/var/folders/8x/y10dxy554tzb5d5d2tv_rffh0000gn/T/rncli-init-template-a0bsiD/node_modules/react-native/template.config.js file inside "react-native" template. Please make sure the template is valid. Read more: https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template at createFromTemplate (/Users/rmunoz/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/commands/init/init.js:131:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.initialize [as func] (/Users/rmunoz/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/commands/init/init.js:184:3) at async Command.handleAction (/Users/rmunoz/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/index.js:106:9) info Run CLI with --verbose flag for more details.

Running command with --verbose flag

debug Installing template from react-native@latest { name: 'rncli-init-template-18zzCA', packageManager: 'yarn@3.2.3' } ➤ YN0000: ┌ Resolution step ➤ YN0061: │ source-map-resolve@npm:0.5.3 is deprecated: See https://github.com/lydell/source-map-resolve#deprecated ➤ YN0061: │ resolve-url@npm:0.2.1 is deprecated: https://github.com/lydell/resolve-url#deprecated ➤ YN0061: │ urix@npm:0.1.0 is deprecated: Please see https://github.com/lydell/urix#deprecated ➤ YN0061: │ source-map-url@npm:0.4.1 is deprecated: See https://github.com/lydell/source-map-url#deprecated ➤ YN0061: │ uglify-es@npm:3.3.10 is deprecated: support for ECMAScript is superseded byuglify-js as of v3.13.0 ➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged ➤ YN0061: │ @npmcli/move-file@npm:2.0.1 is deprecated: This functionality has been moved to @npmcli/fs ➤ YN0002: │ react-native-codegen@npm:0.71.5 doesn't provide @babel/preset-env (pdcb72), requested by jscodeshift ➤ YN0002: │ rncli-init-template-18zzCA@workspace:. doesn't provide react (p6598c), requested by react-native ➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code ➤ YN0000: └ Completed in 5s 494ms ➤ YN0000: ┌ Fetch step ➤ YN0013: │ yargs-parser@npm:18.1.3 can't be found in the cache and will be fetched from the remote registry ➤ YN0013: │ yargs-parser@npm:21.1.1 can't be found in the cache and will be fetched from the remote registry ➤ YN0013: │ yargs@npm:15.4.1 can't be found in the cache and will be fetched from the remote registry ➤ YN0013: │ yargs@npm:17.7.1 can't be found in the cache and will be fetched from the remote registry ➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry ➤ YN0000: └ Completed in 6s 365ms ➤ YN0000: ┌ Link step ➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental ➤ YN0000: └ Completed in 2s 944ms ➤ YN0000: Done with warnings in 14s 932ms debug Getting config from /var/folders/8x/y10dxy554tzb5d5d2tv_rffh0000gn/T/rncli-init-template-18zzCA/node_modules/react-native/template.config.js error Error: Couldn't find the "/var/folders/8x/y10dxy554tzb5d5d2tv_rffh0000gn/T/rncli-init-template-18zzCA/node_modules/react-native/template.config.js file inside "react-native" template. Please make sure the template is valid. Read more: https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template Error: Error: Couldn't find the "/var/folders/8x/y10dxy554tzb5d5d2tv_rffh0000gn/T/rncli-init-template-18zzCA/node_modules/react-native/template.config.js file inside "react-native" template. Please make sure the template is valid. Read more: https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template at createFromTemplate (/Users/rmunoz/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/commands/init/init.js:131:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.initialize [as func] (/Users/rmunoz/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/commands/init/init.js:184:3) at async Command.handleAction (/Users/rmunoz/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/index.js:106:9)

[NickGerleman]

I don't know that React Native plays nicely with Yarn versions after 1.x/Yarn Classic. I know that PnP as a default in Yarn 2.0 certainly broke RN support (also the ability for Metro to resolve anything). IIRC they were walking things back to improve compat, but I have't looked closely at them recently.

I think we could maybe clarify that when we refer to yarn, we are referring to yarn classic.

[NickGerleman]

Also, the CLI should be able to detect this. It's already shelling out to yarn, so it could do a version check at least.

[Pranav-yadav]

I don't know that React Native plays nicely with Yarn versions after 1.x/Yarn Classic. I know that PnP as a default in Yarn 2.0 certainly broke RN support (also the ability for Metro to resolve anything). IIRC they were walking things back to improve compat, but I have't looked closely at them recently.

I think we could maybe clarify that when we refer to yarn, we are referring to yarn classic.

Also, the CLI should be able to detect this. It's already shelling out to yarn, so it could do a version check at least.

(relevant) RN CLI PR: react-native-community/cli#1931

[satya164]

@NickGerleman: I don't know that React Native plays nicely with Yarn versions after 1.x/Yarn Classic

It works great with nodeLinker: node-modules config. I've been using it in multiple projects for a while.

[MagnusHJensen]

Also faced this problem when doing the setup, but it worked when I used node 18.

Yarn: 3.5.0
Before: node: v16.18.1 and (npm v8.19.2)

Now using node v18.11.0 (npm v8.19.2) and it worked.