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

Question

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

[email protected] 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! [email protected] start: react-scripts start npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the [email protected] 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.

[email protected] added 3 packages, removed 1142 packages and updated 3 packages in 27.043s

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

Dan Abramov · Accepted Answer · 2017-07-01 12:58:24Z

7

You are using npm 5. At the moment it has many issues.

I recommend to downgrade to npm 4 and try again:

npm install -g npm@4

rm -rf node_modules
rm package-lock.json
npm install

If it doesn't help check your internet connection. This looks like an issue with your network:

getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443

answered Jul 1, 2017 at 12:58

Dan Abramov

269k87 gold badges417 silver badges523 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shanmugharaj Over a year ago

Yes this is it. Thanks.

shanmugharaj · Accepted Answer · 2017-07-01 13:05:29Z

3

I got the answer, since I had yarn and npm both installed in my machine the create-react-app uses yarn and installs all the dependencies and creates yarn.lock file.

So now when I run npm install it looks for package.lock.json and it wont be there. So it uninstalls some package creates by yarn at the time of creation of the project.

So the solution I found is do any of the following

create-react-app my-app

npm install

Then do install npm install -package-

Or

create-react-app my-app

yarn install -package-

Both of this approach is working now for me.

answered Jul 1, 2017 at 13:05

shanmugharaj

3,9347 gold badges48 silver badges71 bronze badges

2 Comments

eden Over a year ago

This solution is actually better instead of downgrading

dcp Over a year ago

Did not work for me, as I do not have yarn installed at all and yet I was still getting the "stale package" error. @Dan Abramov's solution did work though.

Hitarthi Panchal · Accepted Answer · 2018-12-03 11:36:49Z

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

Diego · Accepted Answer · 2020-02-24 03:28:10Z

0

npm install -g npm

And then install create react app again:

npm install -g create-react-app

And then create the project again

answered Feb 24, 2020 at 3:28

Diego

3044 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related