Unable to create a react app using "create-react-app" - reactjs

I have installed "create-react-app" globally on my pc using "npm install create-react-app -g". And it worked just fine for months. I had previously created a lot of react app using the "create-react-app app-name" command. And it worked flawlessly. Until a few days ago when it sudden stopped working and started giving errors. I have tried various things suggested but with no luck. So after days of trying to solve the issue I am asking this question.
I have tried doing the following things:
1> using the "npm cache clean --force" and then "npm cache verify".
2> I also unabled my antivirus (norton) and then ran the commands.
3> I installed the latest node version
4> I intalled the latest npm version and updated it using the command "npm install npm#latest -g"
5> I followed the instructions on this stackoverflow link https://stackoverflow.com/questions/50189096/installing-create-react-app-gives-npm-err-shasum-check-failed-and-npm-err-unex/50191315#50191315 to change the registry.
And a few other things. But nothing has worked.
The error that I get is as follows:
D:\codes\react\maximilianUdemy\project1>create-react-app react-mytest-app
Creating a new React app in D:\codes\react\maximilianUdemy\project1\react-mytest-app.
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 '...HqQqP7Ky/f49Ar0oPZ\n4'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\vaibh\AppData\Roaming\npm-cache\_logs\2019-07-20T10_24_27_969Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts has failed.
Deleting generated file... package.json
Deleting react-mytest-app/ from D:\codes\react\maximilianUdemy\project1
Done.
Below is an excerpt from the C:\Users\vaibh\AppData\Roaming\npm-cache\_logs\2019-07-20T10_24_27_969Z-debug.log. Since the log is really big (664 lines), I have only noted from when the error started showing.
471 verbose stack SyntaxError: Unexpected end of JSON input while parsing near '...HqQqP7Ky/f49Ar0oPZ\n4'
471 verbose stack at JSON.parse (<anonymous>)
471 verbose stack at parseJson (D:\Program_Files\nodejs\node_modules\npm\node_modules\json-parse-better-errors\index.js:7:17)
471 verbose stack at D:\Program_Files\nodejs\node_modules\npm\node_modules\node-fetch-npm\src\body.js:96:50
471 verbose stack at processTicksAndRejections (internal/process/task_queues.js:85:5)
472 verbose cwd D:\codes\react\maximilianUdemy\project1\react-mytest-app
473 verbose Windows_NT 10.0.17134
474 verbose argv "D:\\Program_Files\\nodejs\\node.exe" "D:\\Program_Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save" "--save-exact" "--loglevel" "error" "react" "react-dom" "react-scripts"
475 verbose node v12.6.0
476 verbose npm v6.9.0
477 error Unexpected end of JSON input while parsing near '...HqQqP7Ky/f49Ar0oPZ\n4'
478 verbose exit [ 1, true ]

Try to use npx create-react-app my-app
I think also information in this link will help you.

This problem is create-react-app version with respect to node version.
Create new project
npx create-react-app project_name --template all
Node
create-react-app

First use npx create-react-app, but if the problem persists ->
This will happen usually due to 1 of the two reasons :
Your npm registry is messed up somehow.
You have an old version of 'create-react-app'.
To solve this try:
Run npm get registry to see your current, and npm set registry https://registry.npmjs.org/ to set the registry to default.
To get the new version of create-react-app, simply uninstall the old one globally through npm uninstall -g create-react-app and then run npx create-react-app for creating your react app.

Related

npx create-react-app fails while executing yarnpkg on big sur

I've found a few posts on this already but none of the existing solutions seem to work.
OSX Big Sur
yarn 1.22.10
npm 7.0.11
I updated xcode developer tools.
I deleted npm cache
I removed .npm and .yarnrc folders
And then trying to start a new React app with npx create-react-app and getting the following:
error An unexpected error occurred: "expected workspace package to exist for \"eslint\"".
info If you think this is a bug, please open a bug report with the information provided in "/Users/gdboling/Projects/BalancedComp/clients/packages/rewards/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Aborting installation.
yarnpkg add --exact react react-dom react-scripts cra-template --cwd /Users/gdboling/Projects/BalancedComp/clients/packages/rewards has failed.
The log file has:
26 verbose stack Error: command failed
26 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/#npmcli/promise-spawn/index.js:64:27)
26 verbose stack at ChildProcess.emit (node:events:329:20)
26 verbose stack at maybeClose (node:internal/child_process:1055:16)
26 verbose stack at Process.ChildProcess._handle.onexit (node:internal/child_process:288:5)
Got the same problem on macOS Big Sur. I generally use brew to install my packages. Simply upgrading the packages solved it for me:
brew upgrade
and afterwards
brew cleanup
You may need to restart npm after brew finished upgrading.
Had the exact same issue with a Vue project. I am using OSX Catalina and npm 7.0.8.
My error was resolved with a post found here: https://forum.quasar-framework.org/topic/6258/errors-updating-to-v2/5
With the answer of FrankM:
Check your index.template.html.
Replace htmlWebpackPlugin.options.ctx.mode with ctx.mode
Maybe this helps and you have a similar entry anywhere in your project.

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

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

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

First app with create-react-app, npm start not working

I am trying create my first react app and running into issues basically at step 1. I am trying npm start on the default create-react-app install and I am getting the follow error. I have included screenshots showing create-react-app ran successfully but that has not fixed anything. I have included screenshots of it successfully running create-react-app and of me running npm start with no luck. Thanks.
Here is the log file:
18 verbose npm v6.4.1
19 error file sh
20 error code ELIFECYCLE
21 error errno ENOENT
22 error syscall spawn
23 error robofriends#0.1.0 start: react-scripts start
23 error spawn ENOENT
24 error Failed at the robofriends#0.1.0 start script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]
I tried this solution and it did not work for me:
stackoverflow.com/a/42539669/5069226
create-react-app running
npm start failing
Looks like this has to do with your workspace path.
I tried to replicate this on my machine with the path /tmp/Users/Neil/Desktop/Complete Web Developer/Section 18_React:Redux/robofriends, and i was able to reproduce your error.
╭─  /tmp/Users/Neil/Desktop/Complete Web Developer/Section
18_React:Redux/robofriends 
╰ yarn start  K8S: tools    11:37:33
yarn run v1.7.0
$ react-scripts start
/bin/sh: react-scripts: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
But when i moved the robofriends directory up higher in the tree, it worked fine.
╭─  /tmp/Users/robofriends 
╰ yarn start  K8S: tools  INT(-2) ↵  11:38:34
yarn run v1.7.0
Starting the development server...
I guessed it could be either the long path to node modules or the non-alphanum characters you have in your path, :,_. So i went back down to the React:Redux directory and renamed it to ...React_Redux and tried npm start again in /tmp/Users/Neil/Desktop/Complete Web Developer/Section 18_React_Redux/robofriends`, and it worked just fine :)
So looks like npm doesn't like the : in the executable path.

executing create-react-app gives an error

I get the following error when I run create-react-app my-new-app. My npm version is 6.1.0 and node version is 8.11.3
$ create-react-app my-new-app
Creating a new React app in C:\Users\home\Desktop\Web Development\7.
React\my-new-app.
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 '...ectories":
{},"dist"
:{'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\home\AppData\Roaming\npm-cache\_logs\2018-06-
16T12_46_38_1
22Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-
scripts
has failed.
Deleting generated file... package.json
Deleting my-new-app / from C:\Users\home\Desktop\Web Development\7. React
Done.
Try the below command:
npm cache clean --force
Maybe you have an outdated create-react-app version.
If you have npm 6, then you also have npx. Using npx you can just do:
npx create-react-app my-new-app
And it will use the latest create-react-app, even if you don't have it installed.
Check the documentation

Resources