package-lock.json contains non-exact versions - npm

According to package-lock.json's documentation
It describes the exact tree that was generated, such that subsequent
installs are able to generate identical trees, regardless of
intermediate dependency updates.
I'm looking at a package-lock.json file which contains versions like:
"less": "^3.0.4",
"less-loader": "^4.1.0",
"license-webpack-plugin": "^1.3.1",
"lodash": "^4.17.4",
"memory-fs": "^0.4.1
in the requires block of one of the dependencies.
While the child dependencies of the main project are "locked down" in that there is no version ambiguity, these transitive dependencies are not. But how is npm "able to generate identical trees, regardless of intermediate dependency updates" if any of the dependencies in the tree are subject to interpretation?

According to this thread, in npm#6 there was a change to how the package-lock.json represents dependency versions internally in that it records the originally requested ranged dependency, yet still locks down a specific version.
Previously, the package-lock did not record what version was originally requested by a dependency, only which version it resolved it to at the time of its creation.
Here's example:
package-lock.json
// OLD npm format
// Notice that ajv.requires contains specific version for 'fast-json-stable-stringify'
// also notice that 'fast-json-stable-stringify' entry **mentions for the second time** specific version
{
...
"dependencies": {
...
"ajv": {
"version": "6.11.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.11.0.tgz",
"integrity": "sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==",
"dev": true,
"requires": {
"fast-deep-equal": "3.1.1",
"fast-json-stable-stringify": "2.1.0",
"json-schema-traverse": "0.4.1",
"uri-js": "4.2.2"
}
},
...
"fast-json-stable-stringify": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
"dev": true
},
...
}
...
}
And here's npm6 approach
// "new" npm format (as of npm#6)
// Notice that ajv.requires is not showing specific versions
// but instead shows same values as package.json contains
// However 'fast-json-stable-stringify' entry contains
// SPECIFIC version to have reproducible build
{
...
"dependencies": {
...
"ajv": {
"version": "6.11.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.11.0.tgz",
"integrity": "sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==",
"dev": true,
"requires": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
...
"fast-json-stable-stringify": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
"dev": true
},
...
}
...
}

Related

Force resolutions seems not to work for the dependencies of 'root' package.json

In my application's package.json:
"dependencies": {
"axios": "0.21.2",
....
},
"resolutions": {
"axios": "0.24.0"
},
"scripts": {
"preinstall": "npx npm-force-resolutions",
...
}
However, the 'axios' version that is installed is 0.21.2. I would expect to be 0.24.0. What am I missing? When doing that for nested dependencies, they are forced to use the version defined in resolutions rather than this defined in their package.json. Why it is not the case with the app's package.json?
In package.json add something like this to resolve any grapahql package (replace with your package of issue) to the specified version.
"resolutions": {
"graphql": "^15.8.0",
"**/graphql": "^15.8.0"
},

Getting Postcss warning without using it

I'm getting this Postcss warning:
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. (repeated 19 times)
But I'm not using it. It's very annoying because, as you can see, the message is repeated several times.
I know why I'm getting the error (I don't have a Postcss config file or any plugins, stringifiers, etc, set) but I don't know why is Postcss installed in first place.
This is my package.json
{
"name": "vip-english-website",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"engines": {
"node": "16.x"
},
"dependencies": {
"#dzangolab/vue-accordion": "^1.2.0",
"#nuxtjs/axios": "^5.13.6",
"express": "^4.17.1",
"googleapis": "^91.0.0",
"vue-carousel": "^0.18.0",
"vue-check-view": "^0.3.0",
"vue-gapi": "^2.0.0",
"vue-js-modal": "^2.0.1",
"vuelidate": "^0.7.6"
},
"devDependencies": {
"#nuxtjs/google-fonts": "^1.3.0",
"core-js": "^3.19.1",
"nuxt": "^2.15.8",
"nuxt-windicss": "^2.0.12"
}
}
Do anyone have any idea?
Is been 3 days of troubleshooting this error, finally the solution in the github discussion works for me.
I'm using the following dependencies
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
"axios": "^0.27.2",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
Github Issue - Allow to disable "You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js
In nuxt.config.js, under the build options, add the following as shown below. That worked for me.
build: {
postcss: null,
}
Hope it helps
PostCSS is a dependency of Nuxt. You can use npm ls {package_name} command in your project directory, to view package dependencies tree.
Issue was fixed in recent PostCSS release: https://github.com/postcss/postcss/issues/1375 , but Nuxt probably will update it only on next big release (v3).
just add to nuxt.config.js
build: {
postcss: null,
loaders: {
vue: {
prettify: false
}
}
}
I'm using nuxt 2.15.8 & having the same issue.
The following command & config will supress the warning.
npm i -D #nuxt/postcss8 #nuxtjs/style-resources
In nuxt.config.js, edit/add:
buildModules: [
'#nuxtjs/style-resources',
'#nuxt/postcss8',
],
build: {
postcss: {
plugins: {
},
preset: {
}
}
}
In my case using Nuxt, I not only needed to add the following code to the Nuxt config to disable the warning, but also to actually make the autoprefixer work! (even if the autoprefixer comes by default in Nuxt and a .browserlistrc file exists)
build: {
postcss: {
preset: {
autoprefixer: {
overrideBrowserslist: ['last 3 versions', '> 1%']
}
}
}
}
After a fresh Nuxt install I had the warning, and playing around with newer CSS rules, I noticed that without the above config, filter: grayscale(100%); would not get autoprefixed.
Editing the .browserlistrc file did not help.
For me it solved using npm install inside the project that presented these warnings. Maybe it works for someone else

Understanding difference between 'requires' and 'dependencies' in package-lock.json

In order to understand difference between requires and dependencies in package-lock.json, I am checking the #angular/cli dependency object which looks as below.
Within #angular/cli the uuid package is listed with version 8.3.0 under both requires and dependencies fields.
"#angular/cli": {
"version": "10.1.7",
"resolved": "https://registry.npmjs.org/#angular/cli/-/cli-10.1.7.tgz",
"integrity": "sha512-0tbeHnPIzSV/z+KlZT7N2J1yMnwQi4xIxvbsANrLjoAxNssse84i9BDdMZYsPoV8wbzcDhFOtt5KmfTO0GIeYQ==",
"dev": true,
"requires": {
"#angular-devkit/architect": "0.1001.7",
"#angular-devkit/core": "10.1.7",
"#angular-devkit/schematics": "10.1.7",
"#schematics/angular": "10.1.7",
"#schematics/update": "0.1001.7",
"#yarnpkg/lockfile": "1.1.0",
"ansi-colors": "4.1.1",
"debug": "4.1.1",
"ini": "1.3.5",
"inquirer": "7.3.3",
"npm-package-arg": "8.0.1",
"npm-pick-manifest": "6.1.0",
"open": "7.2.0",
"pacote": "9.5.12",
"read-package-tree": "5.3.1",
"rimraf": "3.0.2",
"semver": "7.3.2",
"symbol-observable": "1.2.0",
"universal-analytics": "0.4.23",
"uuid": "8.3.0"
},
"dependencies": {
"ansi-colors": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
"integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
"dev": true
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
},
"uuid": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.0.tgz",
"integrity": "sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ==",
"dev": true
}
}
I have gone through the stackoverflow post based upon which it makes sense to have uuid listed under requires and dependencies field if the version is different.
However, in this case uuid has same version 8.3.0 under requires and dependencies field. So, why it is required to be listed at both the places?
According to the relevant documentation, a dependencies entry is not only populated for a dependency with a different version than used elsewhere. It will also be populated if the dependency is not used anywhere else. At least, that's my interpretation. If I'm right about that, running npm ls uuid in your project should show that only one uuid entry.
It needs to be listed in both places because dependencies has much more information than requires and that information is needed by npm. The broader answer to "why", though, is "why not?" The package-lock.json file is for npm internal use. The format changed between npm version 6 and npm version 7. It will probably change again. They'll probably do whatever works best for the npm command-line tool. That may involve duplicating information.

npm publishing same version won't update dependencies from in package.json

For some reason I can't remove dependencies from my published npm package without changing the version.
When i first published it, package.json had some dependencies like:
"version": "1.0.0",
"author": {
"name": "me"
},
"dependencies": {
"#angular/common": "^4.2.0",
"#angular/core": "^4.2.0",
}
Later I removed the dependencies, changed the author and republished, what I get when I install the package is:
"version": "1.0.0",
"author": {
"name": "me-changed"
},
"dependencies": {
"#angular/common": "^4.2.0",
"#angular/core": "^4.2.0",
}
I'm using Nexus 2.14 as repository manager and NPM 3.10.
Is this a wanted feature? If not, what is causing it?
You can't change your package and publish it without updating the version. If you published one version it is fix and can't be changed afterwards.

using local less with npm

Are there any established patterns for running less via npm scripts?
for instance, in my package.json file I have:
{
"name": "lesstest",
"description": "less test",
"main": "dist/index.js",
"scripts": {
"build:css": "./node_modules/less/bin/lessc src/less/app.less dist/style.css"
},
"devDependencies": {
"less": "^2.6.0",
}
}
running:
./node_modules/less/bin/lessc src/less/app.less dist/style.css
from terminal works just fine, but when I run
npm run build:css
I get " '.' is not recognized as an internal or external command,
operable program or batch file. " Does this mean that commands in npm scripts cannot include paths? If so, are there any techniques out there to execute a similar intention without using gulp?
You can just use "lessc src/less/app.less dist/style.css"
By default, package.json looks in your node_modules folder, and if it can't find it, looks elsewhere, so you can safely use a downloaded dependency as if you had globally installed it.
I just want to clarify #JRJurman's answer a bit. You can use lessc like this:
{
"name": "lesstest",
"description": "less test",
"scripts": {
"build:css": "lessc src/less/app.less > dist/style.css"
},
"devDependencies": {
"less": "^3.0.0",
}
}
As a more comprehensive pattern for less in npm: You often need to also integrate less file dependencies. The package.json would look like this:
{
"name": "lesstest",
"description": "less test",
"scripts": {
"build:css": "lessc src/less/app.less > dist/style.css"
},
"devDependencies": {
"less": "^3.0.0",
},
"dependencies": {
"#foo/bar": "^1.0.0"
}
}
and in your local baz.less file you would refer to the dependency like this:
#import "#foo/bar/src/a-less-file";
#foo refers to the respective folder within your node_modules
folder and bar/src are the nested folders.
a-less-file refers
to a-less-file.less within your node_modules/#foo/bar/src