So after typing
npx create-react-app myapp
I get this error
error eslint#8.15.0: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "12.13.0"
error Found incompatible module.
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/theodosiostziomakas/Desktop/React Tutorial and Project Course (2022)/01_React Basics Tutorial/my-app has failed.
Deleting generated file... package.json
Deleting generated file... yarn.lock
Deleting my-app/ from /Users/theodosiostziomakas/Desktop/React Tutorial and Project Course (2022)/01_React Basics Tutorial
Done.
How to update the node engine? Could it be something else?
Thanks,
Theo.
It says your current version of node is 12.13.0 and you need at least 12.22.0.
The current version of Node is 16.15.0
You can download an updated one at https://nodejs.org/en/download/
You're using a wrong version of node.
IMHO the best way to manage the node version is using nvm.
Nvm is a tool used to switch easy the node version.
Unix version
Windows version
In your case you have to:
Uninstall node
install nvm
nvm install 12.13.0
nvm install 16.15.0
nvm use 16.15.0
try again npx create-react-app myapp
I am currently having trouble solving dependency tree error with React 18. Initially, I couldn't start a new react project with npx-create-react-app my-app (a template was not provided). I fixed that and can now start a new project, but I have two other react apps that I cannot get to start up.
The first one is a portfolio react template that I downloaded. I opened it up and ran npm start in the terminal with no luck (attached is the dependency tree error message).
These are the steps I took to try to fix it:
I deleted all react and node folders that were dowloaded on my Mac (outside of the directory).
Ran npm install --save --legacy-peer-deps
Ran rm -rf node_modules
Ran npm cach clean --force
I removed package.lock.json
I changed these scripts in package.json to updated versions
nodemon: 2.0.16
react: 18.1.0
react-scripts: 5.0.1
React-dom: 18.1.0
When I then run npm start I get the dependency errors. I would appreciate any help and advice! Thanks so much![!dependency errors]
I installed webpack into my react project, but the same error occurred every time when I use npm start:
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.42.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
C:\react\minimoj\node_modules\webpack (version: 4.43.0)
I tried to remove package-loc.json file + all node_modules + remove webpack name from package.json and reinstall it with npm install. Also I tried same with yarn, but it didn't help. I see that in node_modules version is 4.43 and after I use npm install webpack in the file package-loc.json it shows 4.43, but at the moment when I use npm start it changed to 4.42 and error occur. In addition I also reinstall node.js but it didn't help.
create .env file and add SKIP_PREFLIGHT_CHECK=true
I had similar with a newer webpack version being installed than what react_scripts required.
To fix I deleted webpack and webpack-dev-server from my project's node_modules, went to a console outside of the project dir and ran
npm uninstall webpack
npm uninstall webpack-dev-server
Then ran
npm install
npm run build
And all was well, as my package.json was correct without change.
Since webpack is mostly focused on common js according to some websites, I just tried rollup for my react project and it proved to be much more effective as it supports es+. I would highly recommend it. I took a couple minutes to have everything setup and ready. Also, as a good practice it is better to use yarn as npm has had a lot of known issues for node app management.
Running create-react-app, I get the error in my create-react-app application:
To import Sass files, you first need to install node-sass. Run npm
install node-sass or yarn add node-sass inside your workspace.
I do have node-sass installed.
package.json:
"devDependencies": {
"node-sass": "^4.13.0"
}
project node_modules folder:
I've uninstalled, reinstalled, updated, cleaned cache, etc. How do I fix?
In my case I had the same problem even though node-sass was already installed in my project directory.
To import Sass files, you first need to install node-sass. Run npm
install node-sass or yarn add node-sass inside your workspace.
What I figured out is, my project was running on the react scripts installed globally, and there was an another version inside my local project directory. There was a conflict in getting the base path of 'node-sass'.
I uninstalled the local react-scripts and installed it again in the local project directory. Run,
npm uninstall react-scripts then
npm install react-scripts
That fixed my problem!
what worked for me was that I uninstalled global node-sass
and installed it in my current project directory
npm uninstall -g node-sass
npm install node-sass
make sure to stop npm start until after installation, if possible restart your system when installation is done
node-sass has been deprecated. Please install sass or dart sass to fix your issues.
I had the same issue and setting the SASS_PATH environment variable fixed it for me.
For example if you use docker-compose.yml then add:
environment:
- SASS_PATH=node_modules:src
Maybe someone else can explain why this was needed.
In my case below was my error,
./src/modules/TestListing/components/SurveyCard/index.scss
/usr/local/lib/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!
/usr/local/lib/node_modules/react-scripts/node_modules/postcss-loader/src??postcss!
/usr/local/lib/node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!
/usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!
./src/modules/TestListing/components/SurveyCard/index.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.
The error was happening even though I had installed node-sass globally which was weird.
I figured react-scripts could not able to recognize node-sass in it's environment , Hence I have added node-sass dependency in globally installed react-scripts package
cd /usr/local/bin/node_modules/react-scripts
sudo npm install --unsafe-perm node-sass
In the above command I am actually installing node-sass to a react-script package which is a library, It could fix the issue in my case,
Becareful on the commands, Because I am dong --unsafe-perm, Read it before you do
Actually what worked for me was creating a new folder, creating a react app from there and transferring all the codes to that new folder. Not sure why the problem occurred in the first place.
I had this same problem and I noticed that npm install node-sass was breaking before full installation. I also tried npm uninstall -g node-sass which wasn't adding the package to the package.json file. What worked for me is npm install node-sass --save which installed node--sass and added it as a dev dependency to my package.json file
I had the same issue and I figured out it by installing sass moduele.
npm install sass
or
yarn add sass
node-sass is deprecated, use sass instead. But sass loader expects node-sass. No problem, we can install sass and trick sass-loader that sass is a node-sass
Install sass
npm install sass#^1.55.0 --save
In your package.json file, replace sass entry with this. We can use alias names in package json
node-sass": "npm:sass#^1.55.0
example
"dependencies": {
"axios": "^0.18.1",
"moment": "^2.29.3",
"node-sass": "npm:sass#^1.55.0",
...
works like a charm.
Generally, you should install node-sass:
npm install node-sass --save
# or
yarn add node-sass
How to import
#import 'styles/_colors.scss'; // assuming a styles directory under src/
#import '~nprogress/nprogress'; // importing a css file from the nprogress node module
Sass path variable
To use imports relative to a path you specify, and from node_modules without adding the ~ prefix, you can add a .env file at the project root with the variable SASS_PATH=node_modules:src. To specify more directories you can add them to SASS_PATH separated by a : like path1:path2:path3.
Weird behaviour on my OSX Yosemite: from one day to another all my node modules installed by npm install -g were not found via the Terminal.
I'm not sure if this is due to my node v4.0.0 install the day before.
Try this
echo $(npm config get prefix)/bin
you will get STRING, which should include to your .bash_profile such way
export PATH=$PATH:STRING
Install it globally
npm i -g webpack
If you will work with webpack, install webpack-dev-server too
npm i -g webpack-dev-server
After I Install this two command I also found errors when run the
webpack
command so I figure out the problem by changing the version of webpack so I Install
npm install webpack#2.1.0-beta.22
and every thing work fine for me.
I recommend you first learn a bit about npm and then webpack. You will struggle a lot. but finally you will find the right destination.
I've finally also used NVM for multiple NodeJS versions management and everything went back under control.
Webpack is in your ./node_modules/.bin/ folder so instead of giving just webpack as the command try this.
./node_modules/.bin/webpack
You have the npm bin command to get the folder where npm will install
executables.
You can use the scripts property of your package.json to use webpack
from this directory which will be exported.
"scripts": { "scriptName": "webpack --config etc..." } For example:
"scripts": { "build": "webpack --config webpack.config.js" } You can
then run it with:
npm run build Or even with arguments:
npm run build -- <args>
This allow you to have you webpack.config.js in the root folder of
your project without having webpack globally installed or having your
webpack configuration in the node_modules folder.