JSPM doesn't load dependencies as expected

Question

I've forked the official Bootstrap repository (4.0.0-alpha.6) to implement Gulp rather than Grunt, and to start theming Bootstrap for our own needs.

The project we're developing uses JSPM for its package management. When we try and install our custom Bootstrap project, the dependencies aren't loading correctly.

Running;

jspm install bootstrap=github:TomFoyster/bootstrap@4.0.0-alpha6-ntt-0.0.3

Gives;

Looking up github:TomFoyster/bootstrap
Updating registry cache...
Looking up npm:jquery
ok   Installed npm:jquery@3 (3.1.1)
ok   Installed bootstrap as github:TomFoyster/bootstrap@4.0.0-alpha6-ntt-0.0.3 (4.0.0-alpha6-ntt-0.0.3)
Installed Forks

                           npm:jquery 2.2.4 3.1.1

To inspect individual package constraints, use jspm inspect registry:name.

ok   Install complete.

However, install the official Bootstrap package;

jspm install bootstrap@4.0.0-alpha.6

Gives;

Updating registry cache...
Looking up github:twbs/bootstrap
Looking up npm:jquery
Looking up github:HubSpot/tether
ok   Installed github:HubSpot/tether@^1.1.1 (1.4.0)
ok   Installed bootstrap as github:twbs/bootstrap@4.0.0-alpha.6 (4.0.0-alpha.6)
ok   Install tree has no forks.

ok   Install complete.

You can see the custom repo doesn't install Tether as a dependency, and also installs the jQuery forks - whereas the official package has no forks?

Both of the package.json files in each of the repositories contian the following;

"dependencies": {
    "jquery": ">=1.9.1",
    "tether": "^1.4.0"
},

What have I missed?

score 1 · Accepted Answer · answered Mar 29 '17 at 22:37

When you install a package through jspm it queries the jspm-registry to check if there is a defined alias or override for that package. So doing

jspm install bootstrap@4.0.0-alpha.6

Will check the registry and find out that there is a custom override defined for bootstrap@4, which reads:

{
  "main": "dist/js/bootstrap",
  "files": null,
  "ignore": [
    "dist/js/npm"
  ],
  "shim": {
    "dist/js/bootstrap": {
      "deps": [
        "jquery",
        "tether"
      ],
      "exports": "$"
    }
  },
  "dependencies": {
    "jquery": "*",
    "tether": "github:HubSpot/tether@^1.1.1"
  }
}

And this config overrides whatever is defined in github:twbs/bootstrap.

Your fork isn't present in the registry, so it installs just what's defined in package.json

Fantastic answer - thanks, I'd never have guessed that. Guessing it's because Tether doesn't exist in JSPM? I'll update my forked Repo to match this - am I right in thinking a `package.json` file with the above dependencies will work in NPM and JSPM? — Tom, Mar 30 '17 at 07:57

JSPM doesn't load dependencies as expected

1 Answers1