npm i conflict issue after update my nodejs - node.js

I upgraded my node from 14 to 16; and faced this problem while doing npm i, see screenshot to see the problem:
terminal screenshot
I have tried to remove node modules, clearing cache, doing npm i again; didn't help.
Also tried doing npm i --legacy-peer-deps
How can I resolve such dependency conflicts?

The error message itself tells you what the problem is and how you might be able to solve it.
You have sass-loader#8.0.2 installed which has node-sass#^4.0.0 as a peer dependency. But in your root project you have node-sass#^7.0.1 installed.
If you look at the sass-loader changelog, you can see that they added support for node-sass v7 in v12.4.0.
So, your solution seems to be either upgrade sass-loader to v12.4.0 or later (v13.0.2 is the latest), or downgrade node-sass to v4.x.x.
If you run into other problems, the node-sass GitHub page has a troubleshooting guide at https://github.com/sass/node-sass/blob/master/TROUBLESHOOTING.md.
Node v16 comes bundled with a newer version of npm, so your problem most likely stems not from the node version upgrade per se, but from an npm upgrade. From https://github.blog/2021-02-02-npm-7-is-now-generally-available/#peer-dependencies (emphasis mine):
Automatically installing peer dependencies is an exciting new feature introduced in npm 7. In previous versions of npm (4-6), peer dependencies conflicts presented a warning that versions were not compatible, but would still install dependencies without an error. npm 7 will block installations if an upstream dependency conflict is present that cannot be automatically resolved.
To help further troubleshoot this, it would be helpful to know the exact version of node (node --version) and npm (npm --version) you are running, as well as the contents of your package.json and your lockfile (package-lock.json). Although the above info should be enough for you to know why this error occurred (npm v7 breaking change) and what you can do to solve it (upgrade sass-loader).

Related

react-dev-utils latest version installs a vulnerable version of browserslist

react-dev-utils#11.0.4 installing a vulnerable version of browserlist, browserslist#4.14.2, although we have updated package on github. https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/package.json#L57
[to test out, you may simple create any folder and do npm i react-dev-utils and then check it using npm ls browserlist]
I dont get, what all are the constraint for this. (I dont see any package-lock.json for this package, which could be a potential reason for the vuln). older version has reported vulnerability CVE-2021-23364.
react-dev-utils#11.0.4 installing a vulnerable version of browserlist, browserslist#4.14.2, although we have updated package on github
This is because that package.json file resides in the default branch which usually contains the latest or development code. At the time you posted the question, that change was not published to the npm registry.
react-dev-utils#11.0.4 has browserslist#4.14.2 listed in its package so that's the version that will be installed. Reference: https://cdn.jsdelivr.net/npm/react-dev-utils#11.0.4/package.json
You need atleast react-dev-utils#12.0.0 to fix that vulnerability. See the versions tab.
[to test out, you may simple create any folder and do npm i react-dev-utils and then check it using npm ls browserlist]
Running that command will install the latest version of react-dev-utils, which now has no vulnerability. So it will fix your issue.
I dont see any package-lock.json for this package, which could be a potential reason for the vuln
package-lock.json cannot be published to registry, only the top level lock file is respected. Reference: Should package-lock.json also be published?
this may be an example package, but how in general we update to latest package? have tried npm update as well.
npm update respects the semver range that you've set in your package.json. If its like "react-dev-utils": "11.0.4" that command won't do anything. If its "react-dev-utils": "^11.0.4", it will try to update to the latest 11.x.x version which you are already on, so again it won't do anything. Reference: npm update does not do anything
In general if you want to upgrade every direct dependency to latest version you can use npm-check-updates before running npm update. Refer https://nodejs.dev/learn/update-all-the-nodejs-dependencies-to-their-latest-version for detailed guide. Related: How to update each dependency in package.json to the latest version?
Now, if it is not a direct dependency, as was in your case, you can force resolutions. This is natively supported in Yarn and NPM v8.3.0 and above. In older NPM versions you need to use a dependency like npm-force-resolutions. Related thread: npm equivalent of yarn resolutions?
There are much more related threads that you can easily find by searching on the web.

Undefined variable: "$font-weight-bolder" when running npm development server

In a vue project, that is worked on by a lot of people a recently started to get this error when running:
npm run dev
error when starting development server
When running npm install, I also get this warning which might be related to the problem:
npm WARN bootstrap#4.5.0 requires a peer of popper.js#^1.16.0 but none is installed. You must install peer dependencies yourself.
I believe this is happening since I updated my node version, but I'm not sure.
From my research this problem might be related to node-sass or the css-loader.
Details:
Windows 10 64bit
node version: 12.16.3
npm version: 6.14.4
What I've already tried
Completely uninstall node and reinstall it
Try different node versions with nvm (I always deleted node_modules and package.lock and ran npm install again)
Completely delete my git repository and start fresh
Delete node_modules and run "npm ci"
install the css loader
Other development environments work fine so it's most likely something specific with this repository and my machine but I don't really know how to find the problem.
And also, the environment was working fine for me a couple of days ago so it's not a general problem in this repository.

Angular5 node js and npm installation problems

I have the latest versions of Node and NPM installed, using which I installed Angular/cli, but it's shooting me with following errors: angular/cli and npm versions not compatible with current version of node.
I suspect that I may(not) be installing out of the proper directory. But at this point, what else can I do? thanks.
Please check: Screenshot with details of the issue
I also faced a similar problem, but the solution was quite simple : my path was too long.
I shortened it a bit (two directories down) and then I did the install again with success.
Here are the reqs.
Both the CLI and generated project have dependencies that require Node 6.9.0 or higher, together with NPM 3 or higher.
You are using the latest node.js 9.2
you need to uninstall or rollback to 8.9 !!
Here is a guide
https://github.com/angular/angular-cli
Hope this solves it for you.
I faced a similar problem with angular/cli version not compatible with the current node version. This generally happens when you are upgrading from lower version of Angular to any other higher version.
You can try following steps:
npm outdated --> To list latest and current package details in local application.
npm update --> to update the local packages.
If it still doesn`t work,
Try deleting the 'node_modules' folder and install dependencies of fresh:
npm install
You can then check whether all packages, including the cli is not outdated.

npm and node versions incompatible can produce error

I've installed nodenv to manage versions of node and npm in my pc. Because when I try install packages like , angular-cli, webpack , typescript, angular2 and another, I get errors
FIRST QUESTION: Can an version node or npm produce error when i install a package?
Some packages tells things like: "The generated project has dependencies that require Node 4.x.x and NPM 3.x.x."
but they don't mention the exact version. by example Can a version of node 4.1.5 produce errors and not the version 4.0.5 ?
SECOND QUESTION:
I don't like these packages need be installed like global (-g) and the problems i see sometimes there are conflicts between global packages installed.
Example error:
npm WARN EPEERINVALID string-replace-loader#1.0.3 requires a peer of webpack#1.x.x || 2.x.x but none was installed.
PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-macosx.zip
but what about if two global packages use same global package, but some of they use a different version for every package?
Its up to npm package owners to define in their package.json all the upstream dependencies with a set of working versions which play well together ... challenge is as a package owner to make your package.json loose as possible regarding upstream dependencies to enable pulling in newer releases of these dependent packages yet tight enough that your published package still works
Often this is not the case which can lead to version mismatch invoked errors ... if possible always use most recent package releases this goes for nodejs itself as well
When package.json mentions versions such as 3.x.x it means it should work with any value of x.x so just chose the highest number to fit the pattern
Where possible avoid doing a global install unless it is for command line executables ... this is especially true for packages which your code pulls in as opposed to an executable centric package
UPDATE I am now able to successfully install this
npm install -g angular-cli
using the latest release of node
node --version
v6.5.0
so I suggest you upgrade your own project code and node version to avoid that pinned release which fails and work with the most current releases

Google polymer starter kit WARN when npm install

When I download "Intermediate - Advanced users" version of polymer starter kit from github here and on the 4th step of these instructions here I always getting these WARNs:
$ sudo npm install
npm WARN deprecated gulp-minify-css#1.2.4: Please use gulp-clean-css
npm WARN deprecated graceful-fs#3.0.8: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs#^4.0.0 as soon as possible.
npm WARN engine launchpad#0.5.1: wanted: {"node":"^0.12"} (current: {"node":"4.4.2","npm":"2.15.0"})
npm WARN deprecated lodash#1.0.2: lodash#<3.0.0 is no longer maintained. Upgrade to lodash#^4.0.0.
npm WARN optional dep failed, continuing fsevents#1.0.11
npm WARN deprecated graceful-fs#1.2.3: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs#^4.0.0 as soon as possible.
npm WARN deprecated jade#0.26.3: Jade has been renamed to pug, please install the latest version of pug instead of jade
No matter what OS I'm using: tried both Ubuntu and Windows (git bash).
I have npm, bower, gulp installed globally but there's always those WARNs.
I think that maybe it's a dependencies problem or it's because of some code in some of polymer starter kit files, but I'm not a pro developer, so I can't find what is causing the problem
It's all seems to work though when I deploy the project, but I'm new to web dev and not sure if I have to just close my eyes on these WARNs
Nothing to worry about with those warnings. Those come from the npm packages that are set as dependencies in the package.json file. When you run npm install it will install all packages set in the package.json. Every single package has their own package.json that also has some dependenices. Each package install their own needed version of that package and sometimes they use older versions of those packages. Only way to get rid of those warnings would be to get the package creators to update their packages.
Only package that you can update yourself is the gulp-minify-css. You can uninstall that package npm remove gulp-minify-css --save-dev and install the newer non-deprecated version gulp-clean-css. npm install gulp-clean-css --save-dev. If you do that you need to update the gulpfile.js for the project to use the new package.
Find the styleTask for the starter-kit in the gulpfile.js:
var styleTask = function(stylesPath, srcs) {
return gulp.src(srcs.map(function(src) {
return path.join('app', stylesPath, src);
}))
.pipe($.changed(stylesPath, {extension: '.css'}))
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
.pipe(gulp.dest('.tmp/' + stylesPath))
.pipe($.minifyCss())
.pipe(gulp.dest(dist(stylesPath)))
.pipe($.size({title: stylesPath}));
};
and change the .pipe($.minifyCss()) row to be .pipe($.cleanCss({compatibility: 'ie10'}))
Now you have managed to update the starter-kit to use newer non-deprecated package.
Many packages in the npm package manager have some deprecated packages or cause other warnings while installing but most of the time there is no need to worry.
No need to worry about those warnings in this case. They shouldn't cause the problems that you allude to. I verified the PSK guide you mentioned (the page completely appears and functions without error in Chrome Version 49.0.2623.112 on OSX El Capitan).
npm displays deprecation warnings when a dependency being installed has been deprecated by the dependency's package owner/maintainer usually in favor of another package/version that has significant improvements. Packages can be deprecated/undeprecated at will and long after your app has been deployed.
For example, in January, you release an app that depends on gulp-minify-css#1.2.4. The owner of gulp-minify-css no longer has time to maintain the package, so he decides in March to deprecate it in favor of the actively maintained gulp-clean-css. Now, users who npm install your app (which also installs gulp-minify-css) see this deprecation warning, but your app still functions normally. The deprecation does not invalidate your app or cause errors.
While normally one might try to upgrade the dependencies to remove the warnings, that is not recommended for PSK due to package incompatibilities as recently discovered in a pull request:
So I just took this for a spin and I ran into some issues :( although
the current gulp plugins are deprecated they are working for the
community! This PR represents a "high risk" change, that we have found
to be breaking in several odd ways. For that reason I am going to
close this PR for now. That said let's revisit this PR in a few months
and see if things have stabilized more.

Resources