Yarn vs Npm - "works on my machine" - clarification?

Question

I'm new to yarn and something caught my eyes while reading this article which states :

Deterministic:
The same dependencies will be installed the same exact way across every machine regardless of install order. Yarn resolves "works on my machine" issues around versioning and non-determinism by using lockfiles and an install algorithm that is deterministic and reliable

Question:

I don't understand : When I write npm install it looks at the package.json and installs the exact version and each version also installed its dependencies according to its own package.json and so on and so on

So what's the difference (regarding this aspect)

An example of scenario for "thing that can go wrong in npm while not in yarn" will be much appreciated

Answer 1

The package.json file often contains the minimum version required of a dependency. For instance, you could have "^1.0.0", which matches with version 1.0.0 or any minor releases.

{ "name": "my_package", "version": "1.0.0", "dependencies": { "my_dep": "^1.0.0" } }

When you run npm install, it could install the version 1.0.0, 1.1.0, 1.2.0 etc of "my_dep", because all those versions meet the requirements of package.json. You could end up with version 1.0.0 on your local machine and 1.1.0 on your test environment.

Yarn creates a yarn.lock file automatically to make sure you always install the same version of "my_dep". It generates something like this:

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
my_dep@^1.0.0:    
version "1.1.0"
resolved "https://registry.npmjs.org/my_dep/-/my_dep-1.1.0.tgz#a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0"

Yarn will use this file to resolve "my_dep" to version 1.1.0, even if there is a new version (1.2.0) available.

All yarn.lock files should be checked into source control (e.g. git or mercurial). This allows Yarn to install the same exact dependency tree across all machines, whether it be your coworker’s laptop or a CI server.

References:

https://docs.npmjs.com/getting-started/using-a-package.json

https://docs.npmjs.com/getting-started/semantic-versioning

https://yarnpkg.com/en/docs/yarn-lock