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

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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 <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8a6b8a588fc">[email protected]</a>

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

Method 2

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.

Method 3

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

Method 4

npm install -g npm

And then install create react app again:

npm install -g create-react-app

And then create the project again


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x