How to localize the dependencies of a package in node_modules

Question

Here is my project's package.json

"dependencies": {
    ...
    "react-infinite-viewer": "^0.28.0"
}

Dependencies of this package: myproject -> react-infinite-viewer -> infinite-viewer -> gesto

The actual situation of the project, there are actually more than one package that directly or indirectly depends on gesto. This means it's a multiple packages dependencies on gesto at different levels

I have tried this way

"dependencies": {
  ...
  "react-infinite-viewer": "^0.28.0",
  "gesto":"file:packages/gesto"
}

This approach only installs the modified code in the project's node_modules. This means that I can use the modified code in my project, but react-infinite-viewer will still use the original code.

myproject
  ->node_modules
    ->react-infinite-viewer
        ->node_modules
            ->infinite-viewer
                ->node_modules
                    gesto // here is still use the original code
  ...
  ->gesto // here using the modified code 

should I use pnpm or lerna to solve this problem?

When using yarn/pnpm i/yarn add xxx..., all packages that dependencies on gesto use the modified gesto code

Answer 1

solved by configuring resolutions

if use npm,change the package.json:

{
    ...
      "scripts": {
          "preinstall": "npx npm-force-resolutions"
      },
     "resolutions": {
          "gesto":"file:packages/gesto"
     }
}

if use yarn , it will be easier than npm

{
    ...
     "resolutions": {
          "gesto":"file:packages/gesto"
     }
}

Yarn's selective dependency resolution feature is the default functionality of npm-force-resolutions. You do not need to install npm-force-resolutions to use it. Selective dependency resolutions