NPM installs different version from package.json

user_7454177 0
Viewed 6178

For our Electron app we need a specific version of pixi.js (5.0.0-rc.3). In our package.json we therefore specified "pixi.js": "^5.0.0-rc.3",.

When we run npm install now and open our app then the welcome message by pixi and the package-lock.json state version 5.0.4. We tried removing the node_modules folder and reinstalling all modules but it still got the wrong version.

Our import statement in the html file is const PIXI = require('pixi.js'); and this should get the locally installed version of pixi if I am not mistaken.

Is this a bug? Or is it on purpose (if yes, which purpose)?

Update

As there are some answers and comments now, here's what we further tried so far:

  • Delete package-lock.json, node_modules folder (locally and globally) and ran npm i again
  • Reinstall NodeJS (LTS)
  • Tested everything with current version of NodeJS
  • Removed the '^' from the package.json as it is ok with any version in the range installing
  • Tested it on another Windows 10 machine and on macOS

Update 2

There are three answers now and none could solve the problem so far, I'm starting to believe that this isn't my fault, but may be a bug with Pixi JS. I opened an issue on their GitHub page, maybe they can help.

pixi.js npm npm-install node.js
4 Answers

If you want to install specific version don't use ~ or ^ in package.json, use the version exactly

The tilde ~ matches the most recent patch version (the third number) for the specified minor version (the second number).
~1.2.3 will match all 1.2.x versions but will hold off on 1.3.0.

The caret ^ is more relaxed. It matches the most recent minor version (the second number) for the specified major version (the first number).
^1.2.3 will match any 1.x.x release including 1.3.0, but will hold off on 2.0.0.

In your case: "pixi.js": "5.0.0-rc.3"

From: What's the difference between tilde(~) and caret(^) in package.json?

user_12038440

Original Answer

If you absolutely need that version you should:

  • update your package.json file to "pixi.js": "5.0.0-rc.3".
  • Delete the existing package-lock.json or npm-shrinkwrap.json file.
  • Rerun npm i

By doing this you are pinning your dependency to that specific version.

Also check out this semver calculator. You can load the pixi.js package. Then enter 5.0.0-rc.3 and ^5.0.0-rc.3. It will show you how the ^ changes the behavior of finding matches.

I've found that the calculator often visually helps to understand semver math better than reading the docs does for some folks.

Hope this helps!

Updated Answer

If you look at the package-lock.json file and look at the dependencies for pixi.js all of the dependencies use the ^ and are not pinning the version to 5.0.0-rc3. Instead, they are being forced up to the latest patch version, which is 5.0.4 and a setting on NPMs/ pixis side, not yours.

    "pixi.js": {
      "version": "5.0.0-rc.3",
      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-5.0.0-rc.3.tgz",
      "integrity": "sha512-+B6ZMvJNEz/IoiC+BrwP9PsDonEAj4TOZw+yuZ/K8WQokcSm9uAp3PJ+6eFFWTjnkxsAcMP9tgldmDdTFoAF7w==",
      "requires": {
        "@pixi/accessibility": "^5.0.0-rc.3",
        "@pixi/app": "^5.0.0-rc.3",
        "@pixi/constants": "^5.0.0-rc.3",
        "@pixi/core": "^5.0.0-rc.3",
        "@pixi/display": "^5.0.0-rc.3",
        "@pixi/extract": "^5.0.0-rc.3",
        "@pixi/filter-alpha": "^5.0.0-rc.3",
        "@pixi/filter-blur": "^5.0.0-rc.3",
        "@pixi/filter-color-matrix": "^5.0.0-rc.3",
        "@pixi/filter-displacement": "^5.0.0-rc.3",
        "@pixi/filter-fxaa": "^5.0.0-rc.3",
        "@pixi/filter-noise": "^5.0.0-rc.3",
        "@pixi/graphics": "^5.0.0-rc.3",
        "@pixi/interaction": "^5.0.0-rc.3",
        "@pixi/loaders": "^5.0.0-rc.3",
        "@pixi/math": "^5.0.0-rc.3",
        "@pixi/mesh": "^5.0.0-rc.3",
        "@pixi/mesh-extras": "^5.0.0-rc.3",
        "@pixi/mixin-cache-as-bitmap": "^5.0.0-rc.3",
        "@pixi/mixin-get-child-by-name": "^5.0.0-rc.3",
        "@pixi/mixin-get-global-position": "^5.0.0-rc.3",
        "@pixi/particles": "^5.0.0-rc.3",
        "@pixi/polyfill": "^5.0.0-rc.3",
        "@pixi/prepare": "^5.0.0-rc.3",
        "@pixi/runner": "^5.0.0-rc.3",
        "@pixi/settings": "^5.0.0-rc.3",
        "@pixi/sprite": "^5.0.0-rc.3",
        "@pixi/sprite-animated": "^5.0.0-rc.3",
        "@pixi/sprite-tiling": "^5.0.0-rc.3",
        "@pixi/spritesheet": "^5.0.0-rc.3",
        "@pixi/text": "^5.0.0-rc.3",
        "@pixi/text-bitmap": "^5.0.0-rc.3",
        "@pixi/ticker": "^5.0.0-rc.3",
        "@pixi/utils": "^5.0.0-rc.3"
      }
    },

It looks like if you want this to work, and I would really just advise you to update your app to work with the updated package instead of doing this, you'll need to

  • fork pixi.js at the 5.0.0-rc3 tag, https://github.com/pixijs/pixi.js/tree/v5.0.0-rc.3
  • Update the package.json file to make all of it's dependencies 5.0.0-rc.3 instead of ^5.0.0-rc.3
  • Create a dependency on your forked repository instead of the published npm module.
user_559540

TL;DR The solution is to explicitly specify the exact versions of the @pixi sub-modules in your package.json like this:

"dependencies": {
  "@pixi/core": "5.0.0-rc.3",
  ... (all other pixi submodules here) ...
  "pixi.js": "5.0.0-rc.3"
}

Detailed explanation:

You are installing pixi.js module version 5.0.0-rc.3, but this is actually just a container for a bunch of pixi sub-modules with their own versions. The sub-module dependencies are specified like @pixi/core": "^5.0.0-rc.3"; the ^ causes npm to grab more recent versions.

I was able to control the version of the sub-modules by adding them to the package.json file, next to the dependency for pixi.js

Here are the steps I used to confirm what was happening and to list the pixi sub-modules:

npm init -y                             ## Create empty npm module
npm install pixi.js@5.0.0-rc.3 --save --save-exact  ## Add pixi.js
cat package-lock.json                   ## See below

...
    "@pixi/core": {
      "version": "5.0.4",
      "resolved": "https://registry.npmjs.org/@pixi/core/-/core-5.0.4.tgz",
      "integrity": "sha512-P2K2JJC+BFZrRZT9P0+Ir8jd7VrH6w7/L1Njg2+iSetW9TdjkPahR+w93VGwpEzEkrYHoNs6FbSFCY38P/6g8A==",
      "requires": {
        "@pixi/constants": "^5.0.4",
        "@pixi/display": "^5.0.4",
        "@pixi/math": "^5.0.4",
        "@pixi/runner": "^5.0.4",
        "@pixi/settings": "^5.0.4",
        "@pixi/ticker": "^5.0.4",
        "@pixi/utils": "^5.0.4"
      }
    },
...
    "pixi.js": {
      "version": "5.0.0-rc.3",
      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-5.0.0-rc.3.tgz",
      "integrity": "sha512-+B6ZMvJNEz/IoiC+BrwP9PsDonEAj4TOZw+yuZ/K8WQokcSm9uAp3PJ+6eFFWTjnkxsAcMP9tgldmDdTFoAF7w==",
      "requires": {
        "@pixi/accessibility": "^5.0.0-rc.3",
        "@pixi/app": "^5.0.0-rc.3",
        "@pixi/constants": "^5.0.0-rc.3",
        "@pixi/core": "^5.0.0-rc.3",
        "@pixi/display": "^5.0.0-rc.3",
        "@pixi/extract": "^5.0.0-rc.3",
        "@pixi/filter-alpha": "^5.0.0-rc.3",
        "@pixi/filter-blur": "^5.0.0-rc.3",
        "@pixi/filter-color-matrix": "^5.0.0-rc.3",
        "@pixi/filter-displacement": "^5.0.0-rc.3",
        "@pixi/filter-fxaa": "^5.0.0-rc.3",
        "@pixi/filter-noise": "^5.0.0-rc.3",
        "@pixi/graphics": "^5.0.0-rc.3",
        "@pixi/interaction": "^5.0.0-rc.3",
        "@pixi/loaders": "^5.0.0-rc.3",
        "@pixi/math": "^5.0.0-rc.3",
        "@pixi/mesh": "^5.0.0-rc.3",
        "@pixi/mesh-extras": "^5.0.0-rc.3",
        "@pixi/mixin-cache-as-bitmap": "^5.0.0-rc.3",
        "@pixi/mixin-get-child-by-name": "^5.0.0-rc.3",
        "@pixi/mixin-get-global-position": "^5.0.0-rc.3",
        "@pixi/particles": "^5.0.0-rc.3",
        "@pixi/polyfill": "^5.0.0-rc.3",
        "@pixi/prepare": "^5.0.0-rc.3",
        "@pixi/runner": "^5.0.0-rc.3",
        "@pixi/settings": "^5.0.0-rc.3",
        "@pixi/sprite": "^5.0.0-rc.3",
        "@pixi/sprite-animated": "^5.0.0-rc.3",
        "@pixi/sprite-tiling": "^5.0.0-rc.3",
        "@pixi/spritesheet": "^5.0.0-rc.3",
        "@pixi/text": "^5.0.0-rc.3",
        "@pixi/text-bitmap": "^5.0.0-rc.3",
        "@pixi/ticker": "^5.0.0-rc.3",
        "@pixi/utils": "^5.0.0-rc.3"
      }
    },
...
user_1170300

I ran into similar issue where instead of required tildify 2.0.0 it was always installing 3.0.0 version.
Note -
I have been trying updating package.json file manually to change the version but that did not help. Here are the commands I used that finally saved my day -

Step 1 - Remove node_modules folder manually

Step 2 - from your package.json directory, run this command to uninstall the package

npm uninstall <package_name>

example -

npm uninstall tildify

Step 3 - from your package.json directory, run this command to install the package with exact version

npm install <package_name>@<package_version> --save-dev --save-exact

example -

npm install tildify@2.0.0 --save-dev --save-exact
user_1862800
Related