Why can't I start a React project with npx? - reactjs

I'm going in circles with npx trying to start a new project. Here's what I get:
"PS C:\Users\John\Documents\WebSites\react_projects> npx create-react-app material-ui
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
"You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).
"We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
npm uninstall -g create-react-app
yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/"
When I type npm uninstall -g create-react-app, I get "up to date, audited 1 package in 495ms. found 0 vulnerabilities."
So I try to create the app again with npx, and I get this:
"Need to install the following packages:
create-react-app
Ok to proceed? (y)"
So I press y, and I get the first error message again. I just go in circles. How can I fix this?

Refer to official reactjs website you need to have ""Node >= 14.0.0 and npm >= 5.6"" on your machine. https://reactjs.org/docs/create-a-new-react-app.html .
Also yarn create is available in Yarn 0.25+
so you might want to check these versions

npm
stands for node package manager. It helps to install, migrate apps by adding dependencies in package.json file. You only need to run npm i. For example in react API call npm i axios you should run and import in file in order to use axios features. Also all you need to have is package.json following dependencies and packages will be added(except node_modules folder as it comes with packages and more in size).
You can use npm to start, build, eject, watch and test.
npx is a CLI tool which provide way to install and manage dependencies hosted in npm registry. It is bundled with npm since 5.2.0v. It is helpful in installing and getting started with frontend JS libraries like reactjs, angularjs, vuejs, Sveltejs or boilerplate apps.

Related

npx create-react-app gives error need to install the following packages: create-react-app

I'm trying to install react to create a project in vs code. When I try doing this using npx create-react-app frontend I get:
Need to install the following packages:
create-react-app
Ok to proceed? (y)
Which then gives me an error saying that:
You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1).
We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/
I entered npm uninstall -g create-react-app and followed the latest instructions , but the the latest instructions say to use npx create-react-app, and when I try it again I keep getting the exact same issue. Does anyone know why this is happening or how to fix this?
You need to uninstall the global installation first which you did but in my case I had to clear the cache too.
try this:
npx clear-npx-cache

Stuck in making a react project

guys. I'm having a trouble when using npx create-react-app script.
Whenever I try to create a react app, it's always show like this:
Creating a new React app in C:\USER\User\Document\GitHub\Projects
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
And it always stuck in there. I ever leave it for almost eight hours, but still it ain't work.
I've been trying to do npm install npm#latest -g to install the latest version of my npm, but still it doesn't work. I even have tried to uninstall the NodeJS in my computer, then reinstall it.
Earlier, I've always done my react projects with this method:
npm init
npm install create-react-app
npm create-react-app my-project
Unfortunately, after a week, I cannot do npm start for every react project that I've made before using that method. I also have tried to use the same method to create a new react project, but still it always stuck in the same part. I really need your help guys.
I'm using the latest version of VSCode on Windows 8.1 by the way.
Thank you in advanced.
Most likely you might be hosting an old version of create-react-app
Here are some processes for you to try out:
Uninstall the global version of create-react-app.
npm uninstall -g create-react-app
Run the following command to delete the create-react-app manually.
rm -rf /usr/local/bin/create-react-app
Now, you can use the npx create-react-app command to create a new app.

How to install react (v16.x) and react-scripts (3.x)

As per the title, I don't want to use
npx create-react-app app-name
, because that command installs react (17x) and react-scripts (4.x)
I tried
npm init react-app app-name --scripts-version 3.4.4
, but even though it installs react-scripts (v3.4.4), it still installs react (17.x)
Also, this gives another error:
error : Cannot find module 'cra-template'
EDIT: To clarify, I want to use CRA for sure.
Just not with the current versions of react-17, react-dom-17, and react-scripts-4
I also don't want to waste time installing v17.x, and v4.x, delete them manually, modify package.json to the versions I want, and npm (re-)install. That will work, but it's not the point.
npm init react-app appname --scripts-version <XX.XX.XX>
or sudo npm init react-app appname --scripts-version <XX.XX.XX>
The version number <XX.XX.XX> is for react-scripts to generate a specific react-app based on dependent version of the initiated react-scripts module.
You will have to do some legwork to see which react-scripts version relates to the specific react version when initializing a building of a new react-app.
React Versions: https://reactjs.org/versions/
React Scripts Versions: https://www.npmjs.com/package/react-scripts
If it keeps installing the newest React version
Enter npm uninstall react,
Then npm install react#XX.XX.XX
Where XX.XX.XX is your target number
You will have to do the same for react-dom (same ver# as react) and react-scripts.
Also the #testing-library dependencies may also need uninstalling (There should be 3 on instantiation - they will not work with previous versions (pre-v17 React))
I came across this exact same problem today, and that was my solution.

Should we have to do this everytime like- install main and dev dependencies and configuring babel,webpack and npm scripts?

I'm a beginner in React and stuck with some problem. I want to create a new react project then every time Will I have to follow the whole guide like - installing main dependencies ,installing dev dependencies and configuring babel,webpack and npm scripts or Is there any workaround so that I can use dependencies installed and configured in another project in my new project as both the projects are present in my local machine or PC.
you need to follow these steps
npx or npm create-react-app my-app
cd my-app
npm start

create-react-app bash: /usr/local/bin/create-react-app: No such file or directory

I had an origonal problem that I tried to fix and got another problem
1. ORIGONAL PROBLEM
I just tried to install a new react app using create-react-app and got this error first
Please note that global installs of create-react-app are no longer supported.
The node modules were installed but none of the other files or directories that normally install.
2. What I did to fix Origonal problem
on the react app website it https://create-react-app.dev/docs/getting-started/ it was suggested that I do the following (which I did)
"If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version."
I tried to run the command npm uninstall -g create-react-app but could not do it as my mac prevented it so ran sudo npm uninstall -g create-react-app
3. New PROBLEM
When I now run create-react-app I get the message
bash: /usr/local/bin/create-react-app: No such file or directory
TDI-MacBook-Air:Active bob$
What do I need to do to get create react App back. I am worried about messing up my installation more so am hesitant to go at it without some advice
Just simply run npx create-react-app app_name to create your app.
npx will fetch the latest version of create-react-app and setup your app.
This solved my error Just simply run npx create-react-app app_name to create your app. npx will fetch the latest version of create-react-app and setup your app.

Resources