React App Suddenly Failing To Compile - scss unable to import - reactjs

App was compiling last night when running npm start. This morning it's throwing this error:
Failed to Compile
./src/components/HamButton/styles.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/components/HamButton/styles.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.
Running npm install node-sass didn't fix it.
If I comment out all scss imports, app will compile however styles are not applied.
What's causing this and how can I fix it?
Thanks
Node v10.15.3
npm v6.4.1

Apparently my npm install was corrupt so followed these steps: On npm install: Unhandled rejection Error: EACCES: permission denied
Then installed node-sass and it worked.

Related

create-react-app Unexpected error. Please report it as a bug: Error: spawn UNKNOWN

I am trying to create a react application, but it gives the following errors:
Creating a new React app in C:\Users\Admin\Desktop\study\portfoliosite\mysite\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
Aborting installation.
Unexpected error. Please report it as a bug:
Error: spawn UNKNOWN
at ChildProcess.spawn (node:internal/child_process:412:11)
at Object.spawn (node:child_process:698:9)
at spawn (C:\Users\Admin\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\cross-spawn\index.js:12:24)
at C:\Users\Admin\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:390:19
at new Promise (<anonymous>)
at install (C:\Users\Admin\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:341:10)
at C:\Users\Admin\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:468:16
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
errno: -4094,
code: 'UNKNOWN',
syscall: 'spawn'
}
Deleting generated file... package.json
Deleting my-app/ from C:\Users\Admin\Desktop\study\portfoliosite\mysite
Done.
I had the same exact error. It was because my anti-virus software viewed the react installation as malware.
Try to clean the cache npm cache clean --force than npx clear-npx-cache and run again npx create-react-app my-app or npx create-react-app#latest my-app --use-npm.
If You still have this problem run Try to run cmd as administrator.
If You installed create-react-app globaly than run npm uninstall -g create-react-app.
Also notice that create-react-app required Node >= 14.0.0 and npm >= 5.6 on your machine
For me It's a antivirus issue, update your antivirus and try. I have faced this issue in windows 11.
Scan your pc/laptop with updated antivirus

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

I am trying to start a new react project But I am getting this error and the app is not created. I have installed react globally

(base) mukund#mukund-Inspiron-15-3567:~$ create-react-app todo-app
Creating a new React app in /home/mukund/todo-app.
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 '...{"babel-core":"^6.0.0'
npm ERR! A complete log of this run can be found in:
npm ERR! /home/mukund/.npm/_logs/2020-05-10T14_41_17_724Z-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 todo-app/ from /home/mukund
Done.
Creating an app like the recommended way by the core React team at reactjs.org should solve the problem.
Do this:
npx create-react-app todo-app
If that is still not working then run the following to clear your npm cache before trying the step above again:
npm cache clean --force
This just gives you a clean reset incase your cached modules are conflicting with each other.

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

Reactjs Project installation issue

I have cloned a react js project from Github to my local,
After giving 'npm start' i am getting the below error
./src/index.js
Module not found: Can't resolve '#material-ui/core/styles' in 'C:\Users\Goodwork\desktop\xxxxxxxxxxx\src'
After cloning do npm install to download dependencies. run below command.
npm install
then run project
npm start
NOTE: if your package.json don't have #material-ui/core in dependencies list then you may have to install it.
run this command.
npm install #material-ui/core

Resources