Adding a package immediately after created by create-react-app is not working

user_2404117 0
Viewed 2839

I am very new to react (started a day ago). I used the create-react-app command line to create an app. I tried in the following order

  • create-react-app my-app
  • npm start

At this point the app is running fine. Then I did the following

  • npm install youtube-api-search
  • npm start

Now i am getting this error

my-app@0.1.0 start /Users/shanmugharajk/Code/udemy/my-app react-scripts start

sh: react-scripts: command not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! my-app@0.1.0 start: react-scripts start npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the my-app@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

This happens every single time with any package I try to install.

One think I noted is when i run

  • npm install youtube-api-search or any pckage it always removes some package. The message I am getting while installing any package is

npm WARN registry Using stale data from https://registry.npmjs.org/ because the host is inaccessible -- are you offline? npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ENOTFOUND: request to https://registry.npmjs.org/redux failed, reason: getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443 npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation. npm WARN gentlyRm not removing /Users/shanmugharajk/Code/udemy/my-app/node_modules/html-minifier/node_modules/.bin/uglifyjs as it wasn't installed by /Users/shanmugharajk/Code/udemy/my-app/node_modules/html-minifier/node_modules/uglify-js npm WARN gentlyRm not removing /Users/shanmugharajk/Code/udemy/my-app/node_modules/espree/node_modules/.bin/acorn as it wasn't installed by /Users/shanmugharajk/Code/udemy/my-app/node_modules/espree/node_modules/acorn npm WARN gentlyRm not removing /Users/shanmugharajk/Code/udemy/my-app/node_modules/autoprefixer/node_modules/.bin/browserslist as it wasn't installed by /Users/shanmugharajk/Code/udemy/my-app/node_modules/autoprefixer/node_modules/browserslist npm notice created a lockfile as package-lock.json. You should commit this file.

  • redux@3.7.1 added 3 packages, removed 1142 packages and updated 3 packages in 27.043s

I couldn't figure out the reason. Please help me.

npm create-react-app reactjs macos
4 Answers

Basic requirement to run React app is:

 nodejs  
 npm

If it is not installed then install this by(specifically for Ubuntu)

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

To create react js app:

npx create-react-app my-DemoApp

A fter that go inside folder by:

cd my-DemoApp

You can see basic folder structure created by this

my-DemoApp
├── README.md
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

After than add basic dependency required by react app by running:

npm install

That will create new folder named : node_modules in your parent folder

You can now run your app by :

npm start

And now you are done with most basic setup, you're app is now ready.

You also can add more library which is mandatory for the app by npm

user_62850050

npm install -g npm

And then install create react app again:

npm install -g create-react-app

And then create the project again

user_40398280
Related