Related
I used Node.js v16.13.1 and created a React application. I tried to use Sass, but when I tried to run it, I got this error:
Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
If you want to use SCSS and Sass in your React app, try to do as below and your files will be correctly compiled:
First remove node-sass:
yarn remove node-sass
# if you use npm
npm uninstall node-sass
Then install sass instead of node-sass:
yarn add -D sass
# if you use npm
npm i -D sass
Don't use node-sass anymore
node-sass is deprecated. Instead use sass. You can uninstall the old and install the new one:
npm uninstall node-sass
npm install sass
But if you still prefer to use node-sass
You can use the following table to install the appropriate version node-sass for your installed Node.js version which you can check by the command node --version.
npm install node-sass#(your version)
You can just switch to Sass in your package.json file, like so:
"node-sass": "npm:sass#^1.49.9",
This way, React still asks for node-sass after removing it and replacing with sass, so you can alias it like this and now React will use Sass.
I had the same problem with sass, and I ran these commands like below, but none of them worked.
npm uninstall node-sass
npm install sass
So finally I took a look at my package.json and I saw that I installed sass-loader, so I uninstalled and installed that and the problem was fixed. You can use the commands below for that:
npm uninstall sass-loader
npm install sass-loader
I figured out this issue using node-sass version 4.14.1 with the following commands:
With npm
npm uninstall node-sass
npm install node-sass#4.14.1
With yarn
yarn remove node-sass
yarn add node-sass#4.14.1
Just remove the node-sass and install sass instead:
delete the node_modules directory.
run yarn remove node-sass
run yarn add sass
Or with npm
delete node_modules directory.
run npm uninstall --save node-sass
run npm install --save sass
There is a lot of misinformation in the replies to this question and it's the first thing to shows up in Google:
If you see this problem in your application, the culprit is not the node-sass or Node.js version. It's the sass-loader issue and that's the library you need to upgrade since older versions are not compatible with the newer node-sass.
You can simply do npm install node-sass#6.0.
This is because Node.js 16 is compatible with node-sass version 6.0.
I got the same issue. At the time of installing 'node-sass', my Node.js version was 15.
After downgrading to Node.js version 12 and installing the version 12-related 'node-sass', it worked fine.
node -v
# Output: v15.2.0
nvm use 12.18.3
Now using Node.js v12.18.3 (npm v6.14.6)
node -v
# Output: v12.8.3
npm install node-sass#4.14.1
To make sure it's working properly, add some abc.sass file. And write styles and import it in the component.
Based on input and the following steps, I got it working for shopware6 while build-administration.sh where a similar error occurred:
Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
ERROR in ./src/app/component/base/sw-button/sw-button.scss (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ref--15-2!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/app/component/base/sw-button/sw-button.sc)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
at getRenderFuncFromSassImpl (/var/ww
Checking the currently installed node-sass version and uninstalling and installing the "lower" version:
npx node-sass -v results in:
node-sass: 7.0.1
libsass 3.5.5
npm uninstall node-sass
npm install node-sass#4.14.1
npx node-sass -v results in:
node-sass 4.14.1 (Wrapper) [JavaScript]
libsass 3.5.5 (Sass Compiler) [C/C++]
Before that, I checked the mentioned version numbers in a complete htdocs folder:
.../htdocs$ find . -iname '*package.json*' | xargs grep node-sass {}
In the resulting (huge) list, the following node-sass versions are found:
....nistration/Resources/app/administration/node_modules/node-sass/package.json: "lint": "eslint bin/node-sass lib scripts test",
./vendor/shopware/administration/Resources/app/administration/node_modules/sass-loader/package.json: "node-sass": "^4.5.0",
grep: {}: Datei oder Verzeichnis nicht gefunden
./vendor/shopware/administration/Resources/app/administration/node_modules/stylelint-webpack-plugin/package.json: "node-sass",
./vendor/shopware/administration/Resources/app/administration/build/nuxt-component-library/package.json: "node-sass": "4.12.0",
./vendor/shopware/administration/Resources/app/administration/package.json: "node-sass": "^7.0.1", <<<<<< THIS ONE !!
./vendor/shopware/administration/Resources/app/administration/package.jsonORIG-2021-12-29: "node-sass": "^7.0.1",
After uninstalling and install node-sass#4.14.1 and changing the marked line from
"node-sass": "^7.0.1",
to
"node-sass": "^4.0.1",
it compiled and build-administration.sh (a shopware6 thing...) succeeded.
Time: 58913ms
Entrypoint commons = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/js/commons.js
Entrypoint app = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/app.css static/js/app.js
Entrypoint storefront = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/storefront.css static/js/storefront.js
Entrypoint payone-payment = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/payone-payment.css static/js/payone-payment.js
Entrypoint wbm-tag-manager-ecomm = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/wbm-tag-manager-ecomm.css static/js/wbm-tag-manager-ecomm.js
3909 modules
build-administration.sh: 14: build-administration.sh: [[: not found
Copying files for bundle: FrameworkBundle
Copying files for bundle: MonologBundle
Copying files for bundle: SwiftmailerBundle
Copying files for bundle: SensioFrameworkExtraBundle
Copying files for bundle: TwigBundle
Copying files for bundle: EnqueueBundle
Copying files for bundle: EnqueueAdapterBundle
Copying files for bundle: Framework
Copying files for bundle: System
Copying files for bundle: Content
Copying files for bundle: Checkout
Copying files for bundle: Administration
Copying files for bundle: Storefront
Copying files for bundle: Elasticsearch
Copying files for bundle: SwagPlatformDemoData
Copying files for bundle: Netzp6AddressValidator
Copying files for bundle: PayonePayment
Copying files for bundle: WbmTagManagerEcomm
Copying files for bundle: DbalKernelPluginLoader
[OK] Successfully copied all bundle files
In my case
#first uninstalled using npm
npm uninstall node-sass
Then install
#using npm
npm i -D sass
I got this error two months back. I tried each and every solution I can probably find.
Check whether you have created multiple React projects on the desktop. I did the same and started facing this issue. Combine all of them inside a single folder to get rid of the error. It worked for me. Please try this if you are making the same mistake.
npm: 8.1.0
vsce: 2.5.3
I have a npm package (colibri) in a local folder and a VSCode extension (vscode-teroshdl) in other folder. colibri is a dependency of vscode-teroshdl:
"dependencies": {
"colibri": "file:../colibri"
},
When I try to package the VSCode extension:
cd colibri
npm install
cd ../vscode-terosHDL
npm install
vsce package
It fails with the error:
ERROR invalid relative path: extension/../colibri/node_modules/cli-progress/CHANGES.md
It's almost certainly this bug: https://github.com/microsoft/vscode-vsce/issues/381 as I just encountered it while trying to package ansible-vscode, which uses symlinks
As mentioned in that issue, I found that running vsce package --yarn (even without yarn-specific files in the working copy) caused it to package as expected.
This was with node v17.6.0 darwin/amd64 and vsce 1.96.1. While testing this, I noticed my vsce was old, but I had the same experience on 2.6.7, which is the latest
I am trying to npm install vue-mapbox mapbox-gl, and I'm getting a dependency tree error.
I'm running Nuxt.js SSR with Vuetify and haven't installed anything related to Mapbox prior to running this install and am getting this error.
38 error code ERESOLVE
39 error ERESOLVE unable to resolve dependency tree
40 error
41 error While resolving: [1mexample[22m#[1m1.0.0[22m
41 error Found: [1mmapbox-gl[22m#[1m1.13.0[22m[2m[22m
41 error [2mnode_modules/mapbox-gl[22m
41 error [1mmapbox-gl[22m#"[1m^1.13.0[22m" from the root project
41 error
41 error Could not resolve dependency:
41 error [35mpeer[39m [1mmapbox-gl[22m#"[1m^0.53.0[22m" from [1mvue-mapbox[22m#[1m0.4.1[22m[2m[22m
41 error [2mnode_modules/vue-mapbox[22m
41 error [1mvue-mapbox[22m#"[1m*[22m" from the root project
41 error
41 error Fix the upstream dependency conflict, or retry
41 error this command with --force, or --legacy-peer-deps
41 error to accept an incorrect (and potentially broken) dependency resolution.
41 error
41 error See /Users/user/.npm/eresolve-report.txt for a full report.
42 verbose exit 1
What's the right way to go about fixing this upstream dependency conflict?
It looks like it's a problem with peer dependencies in the latest version of npm (v7) which is still a beta version.
Try with npm install --legacy-peer-deps. For detailed information check the blog post npm v7 Series - Beta Release! And: SemVer-Major Changes in npm v7.
Use --legacy-peer-deps after npm install. For example, if you want to install Radium, use:
npm install --legacy-peer-deps --save radium
There are two ways:
use npm install --legacy-peer-deps to install, and if this doesn't work use
the force method. Add --force next to npm install: npm install --force
You can follow these commands
First type:
npm config set legacy-peer-deps true
Then type:
npx create-react-app my-app
Your dependency mexample requires mmapbox-gl v1.13.0 and mvue-mapbox requires mmapbox-gl v0.53.0.
NPM doesn't know which version to install, so it gives a warning. You can bypass the errors using -- force or --legacy-peer-deps, but you are ignoring an error, and making unexpected results.
Production Options:
Probably one of your packages is outdated. Upgrading packages and fixing upgrade errors might fix the dependency conflict.
Overriding a dependency manually to avoid the warning and error. You are setting the version to a specific one that you know that works. Usually the newer version.
Example solution with override. Your package.json file will look like this:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"mexample": "^1.2.0",
"vue-mapbox": "*"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"overrides": {
"mmapbox-gl": "1.13.0"
}
}
The last option is bypassing using either:
--legacy-peer-deps completely ignores all peerDependencies using the newest version without pinning on file package-lock.json
--force forces the use of the newest, pinning all the versions on package-lock.json
Extra: You shouldn't use "*" as a version, because it might update major and break dependencies.
Until npm version 7.19.1, it still had the same issue. After upgrading to version 7.20.3, use command npm install -g npm#latest and npm audit fix. All packages will be fixed without error.
I tried multiple ways, but nothing was working for me. At last I tried this and it worked:
npm config set legacy-peer-deps true
Run this in the project folder and then try to install any package. It might work for you as well.
To solve it, fix the upstream dependency conflict installing NPM packages error
Method 1. Just use --legacy-peer-deps after npm install.
For example, if you want to install Axios, use
npm install --legacy-peer-deps --save axios.
Method 2. Updating npm and 'audit fix'
npm I -g npm#latest
npm audit fix --force
Method 3. Using --force to install packages
npm install axios --force
I was stuck on this issue for long which also makes error from other commands which calls for some install commands that was breaking.
The only solution that works (maybe suppresses the error) is
npm config set legacy-peer-deps true
This will set the configuration of legacy-peer-deps to true
To resolve npm dependencies and conflicts with npm packages, use npm-check-updates.
Almost all answers here suggest using force or legacy-peer-deps. Though this will technically work, please note that this is not recommended by NPM if you can avoid it anymore (source). Some folks may not have a choice, but I was able to resolve my dependency conflicts by deleting node-modules and package-lock.json then manually updating packages to their latest version one at a time until it stopped complaining (packages mentioned in the error messages after running npm i. Not a great or clean solution, but at least my packages are up-to-date and I'm not ignoring errors or using legacy solutions.
A lot of upvotes for using --legacy-peer-deps, but if --force works, I would recommend using that since it still pins many dependency versions while --legacy-peer-deps ignores peer dependencies entirely. See the example below:
npm: When to use --force and --legacy-peer-deps
I started getting this error on Azure DevOps a few days ago. I initially thought it was a glitch on the Azure side, but since it continued, we started looking into it a bit more.
It turns out the agent we are using, windows-2022, was updated a few days ago:
Updating readme file for win22 version 20220607.3 (#5713)
Node and NPM now match the latest Node.js LTS version: 16.15.1 (includes npm 8.11.0)
Downloads
You can view all agents-included software on Microsoft-hosted agents, Software.
After reading on Microsoft Visual Studio Developer Community, they recommend downgrading Node.js using Node.js Tool Installer task like this:
- task: NodeTool#0
inputs:
versionSpec: '16.14.2'
Node.js Tool Installer task
npm install fails in Azure DevOps Hosted Agent
However, we decided that we do not want to downgrade Node.js, so the first step was matching Node.js locally with LTS version 16.15.1 and npm 8.11.0.
When running npm ci, we then got the same error locally.
We tried npm ci --force and we then got this error:
npm ci can only install packages when your package.json and
package-lock.json or npm-shrinkwrap.json are in sync. Please update
your lock file with npm install before continuing.
npm install gave the same error even after node_modules was manually removed, but npm install --force worked, and it generated a new package-lock.json file.
npm ci still failed with the same error, but running npm ci --force worked. We decided to update Azure DevOps .yml to include --force and checked in the new package-lock.json file. After doing this, everything worked like before and we could now update our packages one by one.
delete the package-lock.json file
modify the package.json file, updating the version as indicated by the peer dependency
Add a tilde or caret for allowing install latest version and resolving dependency issues, for example :
~1.0.2 means to install version 1.0.2 or the latest patch version such as 1.0.4.
^1.0.2 means to install version 1.0.2 or the latest minor or patch version such as 1.1.0.
run npm install or npm udpate
I resolved this by adding
steps:
- task: NodeTool#0
inputs:
versionSpec: '12.x'
Nothing here worked for me.
After struggling with this issue for so long, I found a solution that worked.
Apparently I had some packages installed globally.
Listed them with:
npm list -g --depth=0
Then removed the unwanted packages with:
npm uninstall -g <package-name>
Finally I got the problem fixed
Stack:
node v10.15.1
ionic 4.10.1
When I run ionic serve I get:
ERROR in (webpack)/hot/emitter.js [ng] Module not found: Error: Can't
resolve 'events' in
'/zazou/node_modules/#angular-devkit/build-angular/node_modules/webpack/hot'
Failed to compile.
Couldn't find an answer for this.
I tried to:
update #angular-devkit/build-angular
npm install webpack-hot-dev-clients
npm install -g webpack and npm install -g webpack-dev-server as suggested here
npm link wepack
I also tried to update my angular CLI
Similar question
Install events using npm.
npm install events
Or to save other people (e.g. repository users), run:
npm install events --save --dev
(same pb with angular 7, using angular/cli)
I don't have THE solution (as I don't really understand the issue), but after a lot of tries, it worked, so let me describe what I did, maybe it'll help you...
swicth to node 9.5.0 (used n to do it)
switching to npm 5.6.0
remove global webpackage (I installed it for a try to solve version..)
npm uninstall webpack -g
rm -rf node_modules
npm install
then an issue with rxjs-compat, so I installed the version 6.4.0 for rxjs and rxjs/compat
Then it worked...
Maybe executing one of these steps will help you...
I also encountered this (when updating to Angular 11). To fix I had to:
rm -rf node_modules
rm package-lock.json
I've got a maven project, within which is JavaScript project cloned as a git sub-module. So the directory structure looks like mavenapp/src/main/javascript/[npm project files]
Inside my package.json, the test looks like this:
"test": "react-scripts test --env=jsdom",
but when I try to run npm test, it says
'react-scripts' is not recognized as an internal or external command,
Interestingly, when I clone the javascript project independently I don't get this error. I've tried re-running npm install.
NPM version: 5.5.1
Node.js version: 9.3.0
It is an error about react-scripts file missing in your node_modules/ directory at the time of installation.
Check your react-script dependency is avaliable or not in package.json.
If not available then add it manually via:
npm install react-scripts --save
If react-scripts is present in package.json, then just type this command
npm install
If react-scripts is not present in package.json, then you probably haven't installed it. To do that, run:
npm install react-scripts --save
Try:
rm -rf node_modules && npm install
Wiping node_modules first, often tends to fix a lot of weird, package related issues like that in Node.
Running these commands worked for me:
npm cache clean --force
npm rebuild
npm install
In my situation, some problems happened with my node package. So I run npm audit fix and it fixed all problems
2023 answer: simply remove node_modules folder and run
npm install
or:
yarn
(depends on you're using npm or yarn)
it worked for me!
no need to do more!!!
It waste a lot of my time until I discover this, I got headache...
Faced the same problem, although I am using yarn.
The following worked for me:
yarn install
yarn start
To avoid this issue to re-occur or you face this issue whenever anyone downloads your project fresh.
It's better to add this in dev dependencies using this command:
npm install react-scripts --save-dev
It will get added like this.
"devDependencies": {
"react-scripts": "^4.0.3"
}
Do Commit and push your code.
Running the npm update command solved my problem.
To rectify this issue follow the following steps
run npm install
then run npm start
This worked fine for me
For Portable apps change
package.json
as follows
"scripts": {
"start": "node node_modules/react-scripts/bin/react-scripts start",
"build": "node node_modules/react-scripts/bin/react-scripts build",
"test": "node node_modules/react-scripts/bin/react-scripts test",
"eject": "node node_modules/react-scripts/bin/react-scripts eject"
}
react-scripts should be listed as a dependency when you run npx create-react-app your-app, but for some reason, it gets this error. I will list some steps that I followed that may help you fix this error:
First, check at your React package.json if there is react-scripts or not:
for example, you should see:
"dependencies": {
...
"react-scripts": "4.0.3",
...
},
If it's already there, now try to re-install your dependencies with npm i
If you still get the same error, try to remove your node_modules with rm -rf node_modules/, then re-install your dependencies with npm i
BUT if the package react-scripts wasn't in your package.json file, you should install it by your package manager like:
npm i react-scripts
then try to start your app with npm start
This is how I fix it
Check and Update the path variable (See below on how to update the path variable)
Delete node_modules and package-lock.json
run npm install
run npm run start
if this didn't work, try to install the nodejs and run repair
or clean npm cache npm cache clean --force
To update the path variable
press windows key
Search for Edit the system environmental variable
Click on Environment Variables...
on System variable bottom section ( there will be two section )
Select Path variable name
Click Edit..
Check if there is C:\Program Files\nodejs on the list, if not add this
I uninstalled my Node.js and showed hidden files.
Then, I went to C:\Users\yourpcname\AppData\Roaming\ and deleted the npm and npm-cache folders.
Finally, I installed a new version of Node.js.
I faced the same issue. I solved it using npm audit fix --force
I had the same issue. I did everything which suggested here. but nothing worked. I had installed react-scripts in my node_modules also used cache but all in vain. then I just npx create-react-app and moved all my code into this new folder and all worked.
npx create-react-app myapp
As for me i managed to fix this issue by install this :
npm audit fix --force
and it work after that.
This is not recommended, so plz don't down arrow, but for troubleshooting..
react-scripts is not recognized as an internal or external command is related to npm.
I would update all of my dependencies in my package.json files to the latest versions in both the main directory and client directory if applicable.
You can do this by using an asterisk "*" instead of specifying a specific version number in your package.json files for your dependencies.
For Example:
"dependencies": {
"body-parser": "*",
"express": "*",
"mongoose": "*",
"react": "*",
"react-dom": "*",
"react-final-form": "*",
"react-final-form-listeners": "*",
"react-mapbox-gl": "*",
"react-redux": "*",
"react-responsive-modal": "*",
}
I would then make sure any package-lock.json were deleted and then run npm install and yarn install in both the main directory and the client directory as well if applicable.
You should then be able to run a yarn build and then use yarn start to run the application.
Use git bash or windows cmd with admin rights to run npm install while fixing this issue, running these commands inside the editor's terminals doesn't help.
first run:
npm ci
then:
npm start
In my case, the problem had to do with not having enough file permissions for some files the react-scripts package installation was going to write to. What solved it was running git bash as an administrator and then running npm install --save react-scripts again.
I have tried many of the solutions to this problem found on line, but in my case nothing worked except for reinstalling NVM for Windows (which I am using to manage multiple Node versions). In the installer, it detects installed Node versions and asks the user if they wish for NVM to control them. I said yes and NVM fixed all PATH issues. As a result, things worked as before. This issue may have multiple causes, but corrupted PATH is definitely one of them and (re)installing NVM fixes PATH.
This is rather old question but this might be of some help for future reference. Delete node_modules folder and run npm install again. Worked for me.
In my case , I edited my files on Linux where I had node v14.0.5 installed, when I rebooted to Windows where I had node v14.0.3 I got the same error. So I updated the node version on windows and all went fine for me.
had similar issue.. i used yarn to fix it.
i noticed that react-scripts was not found in my node modules so i decided to download it with npm but i seem to be failing too. so i tried yarn ( yarn add react-scripts) and that solved the nightmare! Hope this work for you as well. Happy debuging folks.
For me, I just re-installed the react-scripts instead of react-scripts --save.
Started getting this error in Azure DevOps yesterday out of nowhere when running npm run build:
'react-scripts' is not recognized as an internal or external command, operable program or batch file.
However when looking at npm ci that completed it was full of errors like:
FetchError: Invalid response body while trying to fetch
https://registry.npmjs.org/#babel%2fcompat-data: ENOENT: no such file
or directory, lstat
'D:\a\1.npm_cacache\content-v2\sha512\58\0b\dc7dce0b33e86d97736b3c419005951e32af28dda3f5b8c746f16d53d4baed1dc2fd2493e9310f744696008400bf8c91ca84f9fb3ebf541ba93a541b144a'
When commenting out the cache everything started working again:
npm_config_cache: $(Pipeline.Workspace)/.npm
- task: Cache#2
inputs:
key: 'npm | "$(Agent.OS)" | $(clientApp)\package-lock.json'
restoreKeys: |
npm | "$(Agent.OS)"
path: $(npm_config_cache)
displayName: Cache npm
The weird thing is that it has worked for over a year up until yesterday (2021-12-02) and we use the exact same code for caching as Microsoft has documented.
https://learn.microsoft.com/en-us/azure/devops/pipelines/release/caching?view=azure-devops#nodejsnpm
Noting Degraded or Unhealthy on Azure DevOps Status
https://status.dev.azure.com/
I had the same problem and I tried the above thing, but that did not work some how. So,
I just typed yarn. And it went.
When I make a new project using React, to install the React modules I have to run "npm install" (PowerShell) from within the new projects ClientApp folder (e.g. "C:\Users\Chris\source\repos\HelloWorld2\HelloWorld2\ClientApp"). The .NET core WebApp with React needs to have the React files installed in the correct location for React commands to work properly.
This worked for me:
Go to the project folder in CLI and type npm install.Go for a similar command if
using yarn etc.
Then type npm start if you are using Npm. Go for a similar command if using yarn
etc.
The file starts working