How can I fix npx create-react-app error? - reactjs

I'm having trouble making a react project for the first time and I'm basically doing npx create-react-app portfolio and this is the log in the terminal
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
npm ERR! Unexpected end of JSON input while parsing near '...w2l6C\nBZrjaE2TabX86o'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ITland\AppData\Roaming\npm-cache\_logs\2020-06-13T14_28_52_450Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts
cra-template has failed.
Deleting generated file... package.json
Deleting portfolio/ from C:\Users\ITland\Desktop\New folder (2)
Has anyone any idea what's causing this error ?

The Log message shown above indicates that the npx command was run inside the folder -
C:\Users\ITland\Desktop\New folder (2)
The npm command can sometimes fail on Windows due to blank spaces or special chars in the folder names.
It is always recommended to avoid spaces and special characters in the folder names where npm is run.
The above problem may be resolved by running the npm / npx command inside
C:\Users\ITland\Desktop\New_folder_2

Try running the below command
npm cache clean --force
Once this is successful, try doing what you are looking for.

Try with the following way:
npm cache clean --force
If you are a windows user, try deleting all files in this folder:
C:\Users{{your-username}}\AppData\Roaming\npm-cache
Then...
npm cache verify
If that doesn't work, try updating to the lastest
npm i npm#latest -g

Related

Error when I run npx create-react-app my-app

I have tried these two commands and am getting the same error.
npm clean cache --force
npx create-react-app client -timeout=120000
$ npx create-react-app client -timeout=120000
npm WARN exec The following package was not found and will be installed: create-react-app
npm WARN deprecated tar#2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
Creating a new React app in C:\web_dev\MERN\projects\booking-app\client.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! errno ERR_SOCKET_TIMEOUT
npm ERR! network request to https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz failed, reason: Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\web_dev\MERN\projects\booking-app\tmpnodejsnpm-cache\_logs\2021-12-29T13_37_03_989Z-debug-0.log
Aborting installation.
npm install --no-audit --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.
Deleting generated file... package.json
Deleting client/ from C:\web_dev\MERN\projects\booking-app
Done.
I have just faced the same issue when upgrading an old project. What solved, in my case was:
If you use yarn:
yarn global remove create-react-app
yarn cache clean
If you use npm:
npm remove create-react-app
npx clear-npx-cache
Also make sure there is no folder in the directory where you will created the new React project because you can get another warning similar to:
The directory . contains files that could conflict:
<the file(s) name here>/
Either try using a new directory name, or remove the files listed above.
After that, npx create-react-app . ran smoothly.
Those steps described above solved the following subsequent warnings (versions may vary).:
Global warning
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.
tar warning
tar#2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
Even I was getting the same error and then saw your question I closed all the task and run this command "npx create-react-app my-app" again it got solved!
I had the same problem so I uninstalled it globally then reinstall:-
npm uninstall -g create-react-app
npm uninstall create-react-app
Then I used npx:-
npx create-react-app project-app
Tell me if this works for you
Try this:
npm install -g npm#latest
npm install node
npm install -g yarn
yarn cache clean
npx create-react-app my-app
I had the same error sometime ago,
just make sure you don't have any space between the name of your directories folders
like Desktop/react project/my-react-app ...this is wrong
try this
Desktop/reactproject/my-react-app ... correction

react npm start command showing the below error

I have used the command to create react project create-react-app api-tutorial and after installing the project I have used the command npm start. It shows the below error
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-eslint": "10.1.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:
D:\react_projects\node_modules\babel-eslint (version: 9.0.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if D:\react_projects\node_modules\babel-eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-api-tutorial#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-api-tutorial#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\My Dell\AppData\Roaming\npm-cache\_logs\2020-05-23T17_04_50_525Z-debug.log
I have deleted the package.lock.json and reinstall the node_modules and in my system updated react-scripts won't work so every time I create the react project I downgrade the version of react-scripts using the command npm install react-scripts#2.1.8 at that time it was working fine. Now it throws the above error.
How can I solve this issue?
Delete package-lock.json or yarn-lock.json and node_modules.
2.Remove babel-eslint from package.json.
Run "npm install" or yarn install..

create-react-app : npm ERR! Unexpected end of JSON input while parsing near '....'

Describe the bug
npx create-react-app my-app doesn't work for me
i tried npm cache clean --force but i get the same error again and again
Steps to reproduce
npm cache clean --force
npm / npx create-react-app front
npm init react-app front
npx: installed 98 in 37.068s
Creating a new React app in /home/h4kst3r/Desktop/APIs/restaurant-API/front.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
npm ERR! Unexpected end of JSON input while parsing near '...zAJNgZjZUkJ08ybAxwNnR'
npm ERR! A complete log of this run can be found in:
npm ERR! /home/h4kst3r/.npm/_logs/2020-05-20T20_47_49_189Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.
Deleting generated file... package.json
Deleting front/ from /home/h4kst3r/Desktop/APIs/restaurant-API
Done.
System:
OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
Its happened because of slow internet . So wait till ur internet connection is normal. Or install all dependencies one by one
.
If npx create-react-app my-app command not working and throws an error like: npm ERR! Unexpected end of JSON input while parsing near '...zAJNgZjZUkJ08ybAxwNnR', Just check your npm version:
npm --version
npm -v
and if required update it:
npm install -g npm#latest
It will definitely work.
First check for npm version by running the following command npm --version. if you have an npm version then try instally npx globally with the help of npm i -g npx. if npm and ngx are installed properlly then this will work .
sudo npm i -g npx --force worked for me.
You should do it as a root user. Open your terminal and type sudo -i or sudo -s. After successful login, the $ prompt would change to # to indicate that you logged in as a root user on Ubuntu. Then if you use `create-react-app it should actually work :)
There are probably two things that can be at fault.
Poor internet connection.
outdated npm version.
update your npm and seek a strong internet connection.

How can i correct the error i keep getting in creating a react app

Each time i tried creating a react app using create-react-app <...name> i keep getting this error "
Creating a new React app in C:\windows\system32\brian-todos.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
npm ERR! Unexpected end of JSON input while parsing near '...tXcMskoaoOolrubJ3NQGh'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\BrianMartinez\AppData\Roaming\npm-cache_logs\2019-01-12T13_11_25_580Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts has failed.
Deleting generated file... package.json
Deleting brian-todos / from C:\windows\system32
Done."
I even tried npm clear cache it still didn't not work.What do i do about this challenge
It seems you opened your windows console or powershell as an administrator, and you landed in system32 folder. Don't create your project there, that is a reserved folder for system executables. Do something like cd C:\Users\yourusername\Documents and try there.
This is the answer to the challenge i had before now. follow these steps
npm install -g yarn
yarn global add create-react-app
create-react-app

react-scripts: command not found

I am currently trying to use create-react-app which uses three different packages: react, react-scripts and react-dom. I have installed create-react-app and then when I change into the directory and hit npm start I get a react-scripts: command not found. I've ran into a lot of problems with this. I can see react-scripts is in my node_modules folder but I keep getting command not found when trying to run npm start. I tried to delete and re-install all of my node_modules but it didn't work. Anyone else having this issue?
✘ ✝  Node/toDoApp/my-test   master±  npm start
> my-test#0.1.0 start /Users/jzilch/Desktop/Web
Projects/Node:Express/Node/toDoApp/my-test
> 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-test#0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the my-test#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
Firstly Delete package-lock.json file in your project folder.
And then install dependencies again by npm install. That should solve this issue.
Delete the /node_modules directory and the package-lock.json file using the rm command:
rm -rf node_modules
rm -rf package-lock.json
Install react-scripts using the following command:
npm install react-scripts
Install the dependencies using the following command:
npm install
Start the local server by running the following command:
npm run start
Note: If you are a Linux user then don't forget to add the sudo command before npm.
This usually happens because of a bad npm packages installation (using npm and yarn at the same time?). It can be desperating, but if you try these steps, it should work.
1st solution:
Remove node_modules folder. At the project's root folder, run
> yarn
> yarn run start
2nd solution:
At the project's root folder, run
> yarn upgrade
> yarn
> yarn run start
Next time you want to add a dependency using create-react-app, I recommend you to use 'yarn add' instead of 'npm install'.
(Source: https://github.com/facebook/create-react-app/issues/1155)
I use this in a dockerizer enviroment.
I already install locally in node_modules using package.json.
so, I added this:
RUN npm install -g react-scripts
RUN npm install
That solved my confusing issue
One option is to install the react-scripts package globally using the -g flag. This will make the command available to node, regardless of the working directory.
This command will install react-scripts globally:
npm install -g react-scripts
As I was using yarn, I had to run yarn add react-scripts.
I had this problem for ages and I eventually found my solution by sheer chance.
Turns out, you can't have spaces in any folder names.
e.g.
~/projects/tutorial/ReactJS/JavaScript Framework: ReactJS/app-name
won't work because JavaScript Framework: ReactJS contains spaces.
In general, it's probably not great practice to be using spaces in folder/file names anyway but I hope this saves someone at least 4 hours of trial and error.
I would recommend removing the : from your folder names too! (just to be safe)
i too faced this problem once .to solve this ,delete your
node_modules
yarn.lock
manifest_lock.json
it works .
I fixed it by changing folder name in my local system, from
new/landing
to
new_landing
However, the git branch name remains like "new/landing". This was the case with my MAC system.
For me, I deleted the project and initialized another one with the npm create-react-app <Folder Name> script. Instead of create-react-app <Folder Name>.
It worked for me.

Resources