Persistent 404 error when pinning about importmap-rails

[KonnorRogers]

@ianterrell Unfortunately this is how the JSPM generator works.

If you want to use the vendored version of a "subpackage export" you have to do this:

bin/importmap pin sortablejs/modular/sortable.core.esm.js

https://jspm.org/docs/jspm-cli/stable/#link

In particular # 4:

Valid package specifiers with subpaths, such as [email protected]/convert-range, in which case the subpath is resolved against the package's exports and the resulting module is linked.

So it seems this is intended behavior. I wonder if importmaps-rails can smooth it over by adding a list of possible exports, or just auto-generating all possible exports for you? Not entirely sure what the answer is.

[ianterrell]

We're experiencing the same issue — for now I'm using an older version to do the pinning.

Version 2.x still works with libraries pinned directly to the CDN'd version, e.g.:

// config/importmap.rb
pin "sortablejs", to: "https://ga.jspm.io/npm:[email protected]/modular/sortable.esm.js"

To pin, you can downgrade to older version:

# Gemfile
gem "importmap-rails", "~> 1.2"

and then pin:

bundle install
./bin/importmap pin sortablejs

And then reset back to the 2.x version of importmap-rails if you like.

[KonnorRogers]

@ianterrell Interesting. I just did a quick scaffold with sortablejs, but if you have code to share I'd love to take a peek. What you're suggesting may mean that we're only downloading the initial entrypoint, but not vendoring any additional files the import may expect. Hard to know without being able to reproduce the error

[ianterrell]

@KonnorRogers I think we have a few that are causing that issue, and I must have copied one that wasn't! 😆 imask is a culprit for us:

❯ ./bin/importmap pin imask
Pinning "imask" to vendor/javascript/imask.js via download from https://ga.jspm.io/npm:[email protected]/esm/index.js

❯ cat config/importmap.rb
# ...
pin "imask" # @7.3.0

❯ git st
# ...
Untracked files:
  (use "git add <file>..." to include in what will be committed)
	vendor/javascript/imask.js

On request...

❯ tail -100 log/development.log
ActionController::RoutingError (No route matches [GET] "/assets/core/change-details.js"):
ActionController::RoutingError (No route matches [GET] "/assets/core/utils.js"):
ActionController::RoutingError (No route matches [GET] "/assets/masked/base.js"):
ActionController::RoutingError (No route matches [GET] "/assets/masked/date.js"):
# ...

The library as found in the command above:

❯ npx jspm link imask --stdout
{
  "imports": {
    "imask": "https://ga.jspm.io/npm:[email protected]/esm/index.js"
  }
}

❯ curl https://ga.jspm.io/npm:[email protected]/esm/index.js
export{default as InputMask}from"./controls/input.js";
import e from"./core/holder.js";
export{default as HTMLContenteditableMaskElement}from"./controls/html-contenteditable-mask-element.js";
export{default as HTMLInputMaskElement}from"./controls/html-input-mask-element.js";
# ...

Thanks!

[jcoyne]

@mhenrixon how can I revert to NOT downloading files?

Sadly don't think that importmap-rails 2.x supports using a CDN anymore. 😢

[jcoyne]

This looks like it might be due to how jspm is returning the dependencies:

npx jspm link @google/model-viewer --stdout
{
  "imports": {
    "@google/model-viewer": "https://ga.jspm.io/npm:@google/[email protected]/lib/model-viewer.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/[email protected]/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/[email protected]/development/decorators/",
      "lit": "https://ga.jspm.io/npm:[email protected]/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:[email protected]/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:[email protected]/development/lit-html.js",
      "lit-html/is-server.js": "https://ga.jspm.io/npm:[email protected]/development/is-server.js",
      "lit/decorators.js": "https://ga.jspm.io/npm:[email protected]/decorators.js",
      "three": "https://ga.jspm.io/npm:[email protected]/build/three.module.js",
      "three/": "https://ga.jspm.io/npm:[email protected]/"
    }
  }
}

[mhenrixon]

I have exactly the same problem; how can I revert to NOT downloading files?

[ianterrell]

@KonnorRogers Thanks, I'll dive into that. I was likely hitting a related but different issue that I'm working around. My pinning succeeds without issue, but my app receives a million 404s when other related assets are requested, probably from pinning incorrectly to begin with but in a way that seemed to work so far.

[mhenrixon]

Thank you, @ianterrell and @KonnorRogers, for the replication method! TIL how to debug importmaps ❤️

[asecondwill]

My Rails application template worked doing this with 1.2.3, but now with 2.0.1 does not get all the dependencies for the js libraries pinned.

bin/importmap pin highlight.js
Gives these errors for each language:

Loading module from “http://localhost:3000/lib/languages/scss.js” was blocked because of a disallowed MIME type (“text/html”).

I think because none of the language files have been downloaded.

I get similar errors for popperjs, when pinning bootstrap:

~> bin/importmap pin bootstrap
# importmap.rb
pin "bootstrap" # @5.3.2
pin "@popperjs/core", to: "@popperjs--core.js" # @2.11.8

[dhh]

Discussing improving the download pinning for libraries with dependencies here: #217

But you're also free to just manually point to a CDN. Or use 1.2.x.