Can't install in Rails using Rails importmap

[cmoel]

I'm trying to add Rhino Editor to a Rails 7.1 app using importmap-rails v2.0.1. After running bin/importmap pin rhino-editor, I see the following error when pinning lit-html/:

Pinning "lit" to vendor/javascript/lit.js via download from https://ga.jspm.io/npm:lit@2.8.0/index.js
Pinning "lit-element/lit-element.js" to vendor/javascript/lit-element/lit-element.js.js via download from https://ga.jspm.io/npm:lit-element@3.3.3/lit-element.js
Pinning "lit-html" to vendor/javascript/lit-html.js via download from https://ga.jspm.io/npm:lit-html@2.8.0/lit-html.js
Pinning "lit-html/" to vendor/javascript/lit-html/.js via download from https://ga.jspm.io/npm:lit-html@2.8.0/
/Users/cmoel/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/importmap-rails-2.0.1/lib/importmap/packager.rb:80:in `handle_failure_response': Unexpected response code (404) (Importmap::Packager::HTTPError)
        from /Users/cmoel/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/importmap-rails-2.0.1/lib/importmap/packager.rb:118:in `download_package_file'
        from /Users/cmoel/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/importmap-rails-2.0.1/lib/importmap/packager.rb:57:in `download'
        from /Users/cmoel/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/importmap-rails-2.0.1/lib/importmap/commands.rb:19:in `block in pin'
        from /Users/cmoel/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/importmap-rails-2.0.1/lib/importmap/commands.rb:17:in `each'
        from /Users/cmoel/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/importmap-rails-2.0.1/lib/importmap/commands.rb:17:in `pin'
        from /Users/cmoel/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/thor-1.3.0/lib/thor/command.rb:28:in `run'
        from /Users/cmoel/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/thor-1.3.0/lib/thor/invocation.rb:127:in `invoke_command'
        from /Users/cmoel/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/thor-1.3.0/lib/thor.rb:527:in `dispatch'
        from /Users/cmoel/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/thor-1.3.0/lib/thor/base.rb:584:in `start'
        from /Users/cmoel/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/importmap-rails-2.0.1/lib/importmap/commands.rb:141:in `<main>'

Curling the 404ing URL confirms that there's a 404:

$ curl -I https://ga.jspm.io/npm:lit-html@2.8.0/
HTTP/2 404
date: Wed, 21 Feb 2024 03:40:25 GMT
content-type: text/html
content-length: 38

Installing lit by itself works fine:

$ bin/importmap pin lit
Pinning "@lit/reactive-element" to vendor/javascript/@lit/reactive-element.js via download from https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/reactive-element.js
Pinning "lit-element/lit-element.js" to vendor/javascript/lit-element/lit-element.js.js via download from https://ga.jspm.io/npm:lit-element@4.0.4/lit-element.js
Pinning "lit-html" to vendor/javascript/lit-html.js via download from https://ga.jspm.io/npm:lit-html@3.1.2/lit-html.js
Pinning "lit-html/is-server.js" to vendor/javascript/lit-html/is-server.js.js via download from https://ga.jspm.io/npm:lit-html@3.1.2/is-server.js

I'm not sure what the next troubleshooting step would be. Can you provide some guidance?

[KonnorRogers]

I don't have a great answer for you other than to downgrade to importmap-rails ~> 1

unfortunately the decision to always vendor broke a number of packages.

https://github.com/rails/importmap-rails/pull/217

There is a fully bundled version here:

https://unpkg.com/browse/rhino-editor@0.9.1/cdn/exports/index.js

you could try. I think it would be something like:

bin/importmap pin rhino-editor/cdn/exports/index.js

[cmoel]

Thanks for the help. Before opening this issue I tried using unpkg (with bin/importmap pin rhino-editor --from unpkg) on version 2 of importmap-rails and ran into 404s when looking for the chunks referenced in that bundled file because the chunk files weren't vendored.

For now, downgrading to version 1 of importmap-rails unblocks me. Thanks again!

[moneill]

@cmoel did you run into this error in the browser console? I downgraded importmaps-rails to v1 so I could run bin/importmap pin rhino-editor, but can't seem to get past this:

TypeError: Module name, 'rhino-editor/exports/styles/trix.css' does not resolve to a valid URL.

My application.js file contains these relevant lines:

import "rhino-editor"
import "rhino-editor/exports/styles/trix.css"

Thanks for opening this issue -- helped get me unstuck with the first bit!

[KonnorRogers]

@moneill importmaps don't support importing CSS.

you'll need to add a <link> tag in your <head> pointing to the CSS file.

<link rel="stylesheet" href="https://ga.jspm.io/npm:rhino-editor@0.9/exports/styles/trix.css">

[KonnorRogers]

I added some docs here:

https://rhino-editor.vercel.app/tutorials/getting-started/#manual-importmaps-installation