jspm install obs-websocket-js creates invalid link

[arthurka-o]

Hi. When running jspm install obs-websocket-js it creates this import map:

{
  "env": [
    "browser",
    "development",
    "module"
  ],
  "imports": {
    "obs-websocket-js": "https://ga.jspm.io/npm:[email protected]/dist/json.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "crypto": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/crypto.js",
      "crypto-js/": "https://ga.jspm.io/npm:[email protected]/",
      "debug": "https://ga.jspm.io/npm:[email protected]/src/browser.js",
      "eventemitter3": "https://ga.jspm.io/npm:[email protected]/index.mjs",
      "isomorphic-ws": "https://ga.jspm.io/npm:[email protected]/browser.js",
      "ms": "https://ga.jspm.io/npm:[email protected]/index.js",
      "process": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process.js"
    }
  }
}

I don't have a lot of experience with JS ecosystem, but I believe this line is incorrect

"crypto-js/": "https://ga.jspm.io/npm:[email protected]/"

The name includes / at the end, and the link leads to 404. Using --provider unpkg generated link at least leads to somewhere

https://unpkg.com/[email protected]/

Not sure where it goes wrong. Initially I was trying to pin obs-websocket-js lib in my Rails app. Apologizing if I missed something obvious.

[guybedford]

What environment are you running this that you are getting a 404? In the browser it works correctly, see eg https://jspm.org/sandbox#H4sIAAAAAAAAA4WUUXPTMAzH3/cpRHgBrombjcGuS3sdxxiMdRtkvbHHxNEab7EdbHchcHx3HKfpLb2tPLQ+W9LP/8iSoheZpKYuEXLDi8lO1C2YZJMdgIijSYDmidJoxt7S3PoHnjMYZgqczIVbs4i0+3WISDiOvQeGVSmV8YBKYVBYRMUyk48zfGAUfbcZABPMsKTwNU0KHIf2goi0CqJUZrWjvvB9uwCcxpczOEGBKjFSwRfe8GGWlM56nDED8+9nI/s9ptQjQhada3CnSx4wSV7Od8/zm5MP9x9nQ1XHv0/jeZjXxwc/QxZeXsXq4upg/+Is+3z+VdxU4dXlt1k1O0p/fKrieH5kb/H9RhBEmipWGmiyN/aY08GT0mXnjxOzOtTeaHVgj2Sq/QpTLek9Gv+usXlrqclaoyj5aNN1uh8Mg3ckY9qQOy2FdfYc9u+gvU5TWWLvtifIj8zWgaq6NHKLiGmzIVQqnO4GYTAkQmZYsFSTVMlKoyItohEz2ORa0WQLe+00fRvsWvRjQIbpcrEl1tlt3F7wnmhFOzUbMvDB1hxyZgyqvS20np/Lc0iYyPBXwPtApiWXqswZ9attb9fzc8DhMxL5NgzXLut7KzH9yFJJinpb+P8fb8Xw7ZotqWGPqsrW1U733/wi0hZ8U9+rhoTjGGY2sECIc8Y1tAUPtg00lLKob1lR6FXDdP2S6FpQsG82fvY1tM8d1dcNdRoGYZM/V/gbtkYtUCW1lootmBh7iZCi5nKpvcmm4l7DthTXrdDpfmPFgW27667rTjXcKsmfaNvDlglACFwrZtB+NBPQUu20y+xERYUDsDPKQhPQWCZ2DiHYnCBUzOT20LNp8CAxRrF0aW1SgMmxo7R6A3eNnZ9aFhgUcvGqr/D1Ye9xItKOTDtB3Sj/B71Ig5viBQAA.

The trailing slash in the import map is used to map entire paths, which JSPM does when it knows all mappings under that path are identity mappings, so it can remove the redundancy automatically.

[arthurka-o]

My environment is a fresh Rails 8.0.0.beta1 app where I tried to pin obs-websocket-js with importmaps-rails

❯ ./bin/importmap pin obs-websocket-js
Pinning "obs-websocket-js" to vendor/javascript/obs-websocket-js.js via download from https://ga.jspm.io/npm:[email protected]/dist/json.js
Pinning "crypto" to vendor/javascript/crypto.js via download from https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/crypto.js
Pinning "crypto-js/" to vendor/javascript/crypto-js/.js via download from https://ga.jspm.io/npm:[email protected]/
/home/arthur/.rvm/gems/ruby-3.3.4/gems/importmap-rails-2.0.2/lib/importmap/packager.rb:84:in `handle_failure_response': Unexpected response code (404) (Importmap::Packager::HTTPError)
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/importmap-rails-2.0.2/lib/importmap/packager.rb:122:in `download_package_file'
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/importmap-rails-2.0.2/lib/importmap/packager.rb:57:in `download'
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/importmap-rails-2.0.2/lib/importmap/commands.rb:19:in `block in pin'
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/importmap-rails-2.0.2/lib/importmap/commands.rb:17:in `each'
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/importmap-rails-2.0.2/lib/importmap/commands.rb:17:in `pin'
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/thor-1.3.2/lib/thor/command.rb:28:in `run'
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/thor-1.3.2/lib/thor/invocation.rb:127:in `invoke_command'
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/thor-1.3.2/lib/thor.rb:538:in `dispatch'
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/thor-1.3.2/lib/thor/base.rb:584:in `start'
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/importmap-rails-2.0.2/lib/importmap/commands.rb:141:in `<main>'
        from /home/arthur/.rvm/rubies/ruby-3.3.4/lib/ruby/3.3.0/bundled_gems.rb:74:in `require'
        from /home/arthur/.rvm/rubies/ruby-3.3.4/lib/ruby/3.3.0/bundled_gems.rb:74:in `block (2 levels) in replace_require'
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/bootsnap-1.18.4/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:30:in `require'
        from /home/arthur/.rvm/gems/ruby-3.3.4/gems/zeitwerk-2.6.18/lib/zeitwerk/kernel.rb:34:in `require'
        from ./bin/importmap:4:in `<main>'

And then I tried to open https://ga.jspm.io/npm:[email protected]/ in a browser and it returns 404. That's why I assumed that this error is on jspm side. Especially when I run jspm install obs-websocket-js in a different directory to get the same 404 link.
But now seeing that it works in a browser sandbox makes me confused. Maybe it is indeed problem with importmaps-rails

[guybedford]

There are a few issues like this in this repo, which are examples that work correctly on generator.jspm.io, eg here is this one:

https://jspm.org/sandbox#H4sIAAAAAAAAA4WUUXPTMAzH3/cpRHgBrombjcGuS3sdxxiMdRtkvbHHxNEab7EdbHchcHx3HKfpLb2tPLQ+W9LP/8iSoheZpKYuEXLDi8lO1C2YZJMdgIijSYDmidJoxt7S3PoHnjMYZgqczIVbs4i0+3WISDiOvQeGVSmV8YBKYVBYRMUyk48zfGAUfbcZABPMsKTwNU0KHIf2goi0CqJUZrWjvvB9uwCcxpczOEGBKjFSwRfe8GGWlM56nDED8+9nI/s9ptQjQhada3CnSx4wSV7Od8/zm5MP9x9nQ1XHv0/jeZjXxwc/QxZeXsXq4upg/+Is+3z+VdxU4dXlt1k1O0p/fKrieH5kb/H9RhBEmipWGmiyN/aY08GT0mXnjxOzOtTeaHVgj2Sq/QpTLek9Gv+usXlrqclaoyj5aNN1uh8Mg3ckY9qQOy2FdfYc9u+gvU5TWWLvtifIj8zWgaq6NHKLiGmzIVQqnO4GYTAkQmZYsFSTVMlKoyItohEz2ORa0WQLe+00fRvsWvRjQIbpcrEl1tlt3F7wnmhFOzUbMvDB1hxyZgyqvS20np/Lc0iYyPBXwPtApiWXqswZ9attb9fzc8DhMxL5NgzXLut7KzH9yFJJinpb+P8fb8Xw7ZotqWGPqsrW1U733/wi0hZ8U9+rhoTjGGY2sECIc8Y1tAUPtg00lLKob1lR6FXDdP2S6FpQsG82fvY1tM8d1dcNdRoGYZM/V/gbtkYtUCW1lootmBh7iZCi5nKpvcmm4l7DthTXrdDpfmPFgW27667rTjXcKsmfaNvDlglACFwrZtB+NBPQUu20y+xERYUDsDPKQhPQWCZ2DiHYnCBUzOT20LNp8CAxRrF0aW1SgMmxo7R6A3eNnZ9aFhgUcvGqr/D1Ye9xItKOTDtB3Sj/B71Ig5viBQAA

The issue specifically is that JSPM relies on packages represented as folders which are chunked optimized packages, whereas this project relies on modules being single files without internal chunks for shared libraries between exports entry points.

Until this project migrates to supporting folder-based third-party JS packages over file based, these types of issues will continue to be found. JSPM does offer a download API in https://jspm.org/cdn/api#download, and if anyone is interested in implementing this I'm happy to advise.