Why is my npm install failing on Mac for React Native?

Question

New to React Native I've made sure to install node.js from here and after install I'm told:

Node.js v9.5.0 to /usr/local/bin/node
npm v5.6.0 to /usr/local/bin/npm

I can verify the node version:

node --version: v9.5.0

I ran the documentation's getting started for npm install:

npm install -g create-react-native-app

and also referenced building projects and installed watchman with brew:

watchman 4.9.0

in the terminal ran: npm install -g react-native-cli and terminal: npm start and I get:

grim ~/react-native/react-native npm start

> react-native@1000.0.0 start /Users/grim/React-Native/react-native
> /usr/bin/env bash -c './scripts/packager.sh "$@" || true' --

module.js:557
    throw err;
    ^

Error: Cannot find module 'graceful-fs'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/grim/React-Native/react-native/local-cli/cli.js:12:1)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
grim ~/react-native/react-native

After research I found NPM, cannot find 'graceful-fs', no matter what I do and in terminal ran:

sudo npm install -g graceful-fs

and get:

+ graceful-fs@4.1.11
added 1 package in 0.678s

but when I run npm install I get:

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "npm:": npm:babylon@^7.0.0-beta
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/grim/.npm/_logs/2018-02-08T17_08_50_619Z-debug.log

and in the file log it shows:

116 error code EUNSUPPORTEDPROTOCOL
117 error Unsupported URL Type "npm:": npm:babylon@^7.0.0-beta

so I went to The Problem with gulp-util but when I do:

npm ls gulp-util

I get └── (empty).

Further research I found Why is my npm install not working? but that throws an npm ERR! What am I doing wrong and how can I get npm successfully installed on my Mac running Seirra?

What caused this was trying to test RNTester from the react native repo and it told me:

git clone https://github.com/facebook/react-native.git
cd react-native
npm install

Edit

Per the suggested answer already tried brew install node and was told with a warning node 9.5.0 is already installed so tried brew link node then prompted:

grim ~/react-native/react-native brew link node
Linking /usr/local/Cellar/node/9.5.0... 
Error: Could not symlink bin/node
Target /usr/local/bin/node
already exists. You may want to remove it:
  rm '/usr/local/bin/node'

To force the link and overwrite all conflicting files:
  brew link --overwrite node

To list all files that would be deleted:
  brew link --overwrite --dry-run node

so ran brew link --overwrite node.

Edit

Browsing through my files under Users/grim I found a directory with modules in it named node_modules could that be in the wrong location?

Edit

After further research I found Fixing npm On Mac OS X for Homebrew Users and ran:

rm -rf /usr/local/lib/node_modules
brew uninstall node
brew install node --without-npm
echo prefix=~/.npm-packages >> ~/.npmrc
curl -L https://www.npmjs.com/install.sh | sh

modified my ~/.bash_profile with nano:

export PATH="$HOME/.npm-packages/bin:$PATH"

ran npm install and received a missing package.json file so in the terminal did npm init and answered the questions. Went back and pointed to the cloned repo and when I run npm install:

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "npm:": npm:babylon@^7.0.0-beta
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

but if I build a new project with react-native init AwesomeProject and npm install I get:

up to date in 0.416s

and I can point into the project and do react-native run-ios and it works but react-native run-android has to be tweaked in the build.bundle from: classpath 'com.android.tools.build:gradle:2.2.3' to classpath "com.android.tools.build:gradle:2.1.0"

Did you find an answer? If so, care to share? – chapeljuice Feb 22 '18 at 18:30 — chapeljuice, Feb 22 '18 at 18:30

score 2 · Accepted Answer · answered Feb 08 '18 at 17:23

2

Use Homebrew for Mac as package manager;

https://brew.sh/

then you can run: brew install node

There are many other utilities on this.

answered Feb 08 '18 at 17:23

Guilherme Ribeiro Developer

131
8

Already tried that and it still throws the error. Will make an edit. – DᴀʀᴛʜVᴀᴅᴇʀ Feb 08 '18 at 17:27
Thanks of this answer. it works for me – Avinash Dalvi Jan 01 '22 at 02:19

score 0 · Answer 2 · answered Feb 08 '18 at 22:27

0

create-react-native app does not work with npm 5.

I had the same problem on Windows and downgraded my npm to 4 you can use npm i -g npm@4 to downgrade.

answered Feb 08 '18 at 22:27

Tequilalime

611
9
29

Interesting I'll test this out later tonight and get back to you. The issue I'm running is on legacy apps but when I create a new app with unit I don't have an issue until rendering in android – DᴀʀᴛʜVᴀᴅᴇʀ Feb 08 '18 at 22:36
Yeah, hope that will fix your problem too. I had this issue on Windows with node LTS version and npm 5 digged deep in React's Github and found the suggested solution was to downgrade npm to 4 – Tequilalime Feb 08 '18 at 22:50
sadly that didnt work and throws a checkPermsission warning and path error – DᴀʀᴛʜVᴀᴅᴇʀ Feb 09 '18 at 01:12

score 0 · Answer 3 · answered Aug 20 '22 at 18:02

0

You may try to use yarn command with -W flag (or --ignore-workspace-root-check) which might be helpful.

info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Regards

answered Aug 20 '22 at 18:02

csmaster

579
4
14

Why is my npm install failing on Mac for React Native?

3 Answers3