`npx react-native init AwesomeProject` not working

[peterp]

➜ npx react-native init AwesomeProject2

               ######                ######
             ###     ####        ####     ###
            ##          ###    ###          ##
            ##             ####             ##
            ##             ####             ##
            ##           ##    ##           ##
            ##         ###      ###         ##
             ##  ########################  ##
          ######    ###            ###    ######
      ###     ##    ##              ##    ##     ###
   ###         ## ###      ####      ### ##         ###
  ##           ####      ########      ####           ##
 ##             ###     ##########     ###             ##
  ##           ####      ########      ####           ##
   ###         ## ###      ####      ### ##         ###
      ###     ##    ##              ##    ##     ###
          ######    ###            ###    ######
             ##  ########################  ##
            ##         ###      ###         ##
            ##           ##    ##           ##
            ##             ####             ##
            ##             ####             ##
            ##          ###    ###          ##
             ###     ####        ####     ###
               ######                ######


                  Welcome to React Native!
                 Learn once, write anywhere

✔ Downloading template
✖ Copying template
error Error: Couldn't find the "/var/folders/w5/bsw5vt490q78cyx2_h42ldtw0000gn/T/rncli-init-template-nzsCCY/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

I'm on Mac OS and don't have the react-native cli installed globally.

[thymikee]

Maybe it's something with permissions? We've seen a few users having similar issues and reasons were varying. We can't really reproduce it ourselves. If you could debug this (clone this repo and follow CONTRIBUTING.md instructions), we'd be thankful for your help

[peterp]

Running sudo npx react-native init AwesomeProject2 made it work. The download too way longer than before, so I'm guessing that it could not stream the download into the destination correctly.

Obviously running as sudo has implications, but writing down my stream of thoughts as I debug this may be helpful to others.

[thymikee]

Awesome, that's something! I suspect we swallow an important error, which should surface earlier. Also, ideas why you would need sudo to make it work? Do you have Node.js installed globally (with sudo) and not as a user?

[peterp]

I can't really think of a reason why this would fail, most npx/ yarn create scripts don't.

~/Personal/cli (master)
➜ which node
/usr/local/bin/node

~/Personal/cli (master)
➜ ll /usr/local/bin/node
lrwxr-xr-x  1 peterp  admin    30B Feb 24 14:19 /usr/local/bin/node -> ../Cellar/node/13.8.0/bin/node

[peterp]

It appears to have something to do with both yarn and npm not wanting to run in the os.tmpdir(),

as an example:

➜ pwd
/var/folders/w5/bsw5vt490q78cyx2_h42ldtw0000gn/T/x

➜ ll .
total 0
drwxr-xr-x     2 peterp  staff    64B Mar 19 15:55 .
drwx------@ 3838 peterp  staff   120K Mar 19 16:11 ..

➜ yarn add react-native@latest
yarn add v1.22.0
warning package.json: No license field
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
warning No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-native > metro-react-native-babel-transformer@0.56.4" has unmet peer dependency "@babel/core@*".
warning " > react-native@0.61.5" has unmet peer dependency "react@16.9.0".
[4/4] 🔨  Building fresh packages...

warning No license field
success Saved 1 new dependency.
info Direct dependencies
└─ react-native@0.61.5
info All dependencies
└─ react-native@0.61.5
✨  Done in 1.90s.

➜ ll .
total 0
drwxr-xr-x     2 peterp  staff    64B Mar 19 15:55 .
drwx------@ 3838 peterp  staff   120K Mar 19 16:11 ..

Bone dry! Running yarn add react-native@latest works in any other directory.

[thymikee]

Um, but did you create a package.json? And a directory inside $TMP?
What if you try:

mkdir rncli-tmp
cd rncli-tmp
yarn init -y
yarn add react-native
ls -al

This succeeds on my end and creates

drwxr-xr-x    5 thymikee  x     160 Mar 19 16:39 .
drwx------@ 275 thymikee  x    8800 Mar 19 16:39 ..
drwxr-xr-x  467 thymikee  x   14944 Mar 19 16:39 node_modules
-rw-r--r--    1 thymikee  x     145 Mar 19 16:39 package.json
-rw-r--r--    1 thymikee  x  204778 Mar 19 16:39 yarn.lock

$ cat package.json
{
  "name": "rncli-tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react-native": "^0.61.5"
  }
}

[peterp]

I'm tracing the commands that react-native's cli executes, I did not create a package.json, since the cli doesn't do that and I created a directory within the same temporary folder that the cli uses.

cli/packages/cli/src/commands/init/init.ts

Line 100 in 4dbfc77

await installTemplatePackage(uri, templateSourceDir, npm);

[thymikee]

Yea, CLI doesn't "create" a package.json, it's copied over from the template.

[peterp]

The step I'm referencing is run before the package.json is copied. The package.json is copied after yarn add react-native@latest

I believe that yarn init -y needs to be run before running yarn add

Would you want to jump on a call, or something, so that I can show you?

[peterp]

The line that is failing is the step that creates the template. The step that creates the template runs: yarn add react-native@latest

[thymikee]

On my end it yarn add works with or without package.json in a temporary directory. Does it work in any case for you, without sudo?

I can see that you have the same permissions set on tmp dir as mine, so that seems fine.

Another thing that comes to my mind is that this call

cli/packages/cli/src/commands/init/init.ts

Lines 92 to 94 in 4dbfc77

	const templateSourceDir = fs.mkdtempSync(
	path.join(os.tmpdir(), 'rncli-init-template-'),
	);

creates a directory with permissions that prevent you from installing. But even so, Yarn would throw EACCES then. Let me know if you find out more about it

[peterp]

On my end it yarn add works with or without package.json in a temporary directory. Does it work in any case for you, without sudo?

It does not work in the temporary directory.

cli/packages/cli/src/commands/init/init.ts

Lines 92 to 94 in 4dbfc77

	const templateSourceDir = fs.mkdtempSync(
	path.join(os.tmpdir(), 'rncli-init-template-'),
	);

This line does create the directory with the correct permissions, but running yarn add does not work in the tmp directory it created.

Interestingly enough other yarn create commands that work in the tmp directory works fine.

My yarn is installed via homebrew.

[peterp]

Steps that do work in the temporary folders is to run yarn init -y before running yarn add react-native

[thymikee]

Steps that do work in the temporary folders is to run yarn init -y before running yarn add react-native

Cc @Esemesek. I think we could do init, just need to figure out something that works with yarn and npm :)