react-scripts: not found on create-react-app project on ubuntu?

Question

I am working on reactjs using this one

https://github.com/facebookincubator/create-react-app

But when i deploy it to digitalocean on top of ubuntu 16 I can not run npm run build and got this as an error.

deploy@xxxx:/www/tmdb_admin$ sudo npm run build
[sudo] password for deploy: 

> [email protected] build /www/tmdb_admin
> react-scripts build

sh: 1: react-scripts: not found

npm ERR! Linux 4.4.0-57-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! node v7.3.0
npm ERR! npm  v4.0.5
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] build: `react-scripts build`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] build script 'react-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the tmdb_admin package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs tmdb_admin
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls tmdb_admin
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /www/tmdb_admin/npm-debug.log

So this is my package.json file.

{
  "name": "tmdb_admin",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "autoprefixer-stylus": "0.10.0",
    "concurrently": "3.0.0",
    "react-scripts": "0.6.1",
    "stylus": "0.54.5"
  },
  "dependencies": {
    "bulma": "^0.2.3",
    "case-sensitive-paths-webpack-plugin": "^1.1.4",
    "es6-promise": "^4.0.5",
    "font-awesome": "^4.7.0",
    "isomorphic-fetch": "^2.2.1",
    "jwt-simple": "^0.5.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-pagify": "^2.1.1",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.0",
    "react-router-redux": "^4.0.4",
    "react-slick": "^0.14.5",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0",
    "segmentize": "^0.4.1",
    "slick-carousel": "^1.6.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "watch": "concurrently --names 'webpack, stylus' --prefix name 'npm run start' 'npm run styles:watch'",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "styles": "stylus -u autoprefixer-stylus ./src/css/style.styl -o ./src/css/style.css",
    "styles:watch": "stylus -u autoprefixer-stylus -w ./src/css/style.styl -o ./src/css/style.css"
  }
}

And this is my node and npm version.

deploy@xxxx:~$ node -v
v7.3.0
deploy@xxxx:~$ npm -v
4.0.5

How can i fix this and make npm run build works?

Thanks!

Answer 1

When you copy a generated create-react-app project to another directory (i.e. when it was deployed to the server), it failed because symlinks were not preserved. See https://github.com/facebookincubator/create-react-app/issues/200. The file react-scripts in ./node_modules/.bin/ needs to be symlinked to ./node_modules/react-scripts/bin/react-scripts.js. Using diff will not show the differences since the symlinks will be resolved.

Easiest solution is to create a temporary react project on the server (i.e. on the Digitalocean) and then copy the content of the ./node_modules/.bin using copy -a (and not copy -r, in order to preserve symlinks).

$ create-react-app tempReact
$ cp -a tempReact/node_modules/.bin/* myActualReactApp/node_modules/.bin

Another solution is to manually re-create the symlinks.

$ ln -s myActualreactApp/node_modules/react-scripts/bin/react-scripts.js myActualReactApp/node_modules/.bin/react-scripts

Answer 2

Run:

sudo chown -R $USER:$USER '/home/ubuntu/.npm/'

On Linux OS NPM and NodeJS are installed globally with sudo and the owner of that files is the root and usually a user can only read/execute that packages. When NPM is stalled a ~/.npm/ folder is created by the root. By running create-react-app you are executing the command as user and create-react-app is trying to modify something in the ~/.npm/ directory which is owned by the root and not to current user. You need to change the owner of that directory to you, so you can modify it without sudo privileges.

Often similar thing happens when you install NPM package with sudo e.g. sudo npm install --save. Again the newly installed package in owned by the root and for example when you try to update/modufy/delete your project without sudo infrnt of NPM you will have similar permission error. In these cases navigate to your project directory and change its owner by running:

sudo chown -R $USER:$USER

Source: create-react-app fails with permission denied

Answer 3

I had the same problem today and I fixed it running install again.

All that you need to do is rum again the command npm install into your project so you'll be able to run npm start comand again!

Works for me! I hope I've Helped!