Force dependency to use specific sub dependency version

Question

I am building my website code with webpack and npm modules and sutmbled upon the following problem:

My code uses jQuery 3.1.1 and adds some plugins to it. I am also using a dependency that has a sub-depencency on jQuery <= 2.2.4. The problem is, that the objects of the sub-dependency obviously don't know about my jQuery plugins, since the module uses a different jquery version.

How can I force all dependencies (top level and nested) to use one version of jQuery? So that require("jquery") always resolves to jQuery 3.1.1.

I've tried using npm shrinkwrap to override the dependency version but that does not seem to work. This is my modified shrinkwrap file:

{
  "name": "example",
  "version": "0.1.0",
  "dependencies": {
    "can": {
      "version": "2.3.27",
      "from": "can@>=2.3.23 <3.0.0",
      "resolved": "https://registry.npmjs.org/can/-/can-2.3.27.tgz",
      "dependencies": {
        "jquery": {
          "version": "3.1.1",
          "from": "^3.1.1"
        }
      }
    }
  }
}

But the dependency of the module is still jQuery 2.2.4 and npm install prints npm ERR! invalid: jquery@3.1.1 /path/.../can/node_modules/jquery

Solutions to solve the issue with webpack instead of npm are also accepted.

Answer 1

I've found the solution myself using a webpack alias.

resolve: {
    root: __dirname,
    alias: {
        "jquery": "node_modules/jquery/src/jquery",
    }
}

Now every module that uses require('jquery') loads the jquery module located under the alias path regardless of the specified version in the module's package.json.

I'm leaving the question open for now since this solution requires webpack and I'd be interested if there is a npm only solution.

Answer 2

Following up on @McFarlane’s answer, this is the safe way to set the alias instead of using raw paths:

{
    resolve: {
        alias: {
            "jquery": require.resolve("jquery"),
        }
    }
}