pinning not picking up dependency correctly

[holman]

Running into a weird issue with a specific pin:

bin/importmap pin @diffusionstudio/core

This has a few dependencies that get detailed in my importmap correctly, but I think there's primarily a problem with pixi.js, the larger of the dependencies: I end up getting a lot of errors in-browser:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (BUSvQCAZ.js, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (DIHtiX9t.js, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (CXKUhZnG.js, line 0)
--snip--

The odd-named files stem from how pixi.js is handling its files- there's a lot of strings that get spit out for filenames. Accordingly, not able to load @diffusionstudio/core through it.

Using the JSPM generator seems to work in that I can access the original diffusionstudio/core library through import maps, but it's not working in Railsland for some reason- any thoughts? (Apologies in advance if I'm holding it wrong; it's tricky to dig into third party dependencies sometimes!)

[jameswilliamiii]

I am having the same issue with rbui-js where dependencies @popperjs/core, date-fns, and chart.js throw the same 404 errors.

[tagliala]

Got a similar same issue with mermaid

I guess it is the trailing slash in dagre-d3-es/src/, but I don't know if this should be fixed here or in a nested package

$ bin/importmap pin mermaid
Pinning "mermaid" to vendor/javascript/mermaid.js via download from https://ga.jspm.io/npm:[email protected]/dist/mermaid.core.mjs

... omissis ...

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

[Lukom]

I have the same issue with bin/importmap pin mermaid – it appears that mermaid has 4 problematic dependencies:

Pinning "dagre-d3-es/src/" to vendor/javascript/dagre-d3-es/src/.js via download from https://ga.jspm.io/npm:[email protected]/src/
Pinning "dayjs/plugin/" to vendor/javascript/dayjs/plugin/.js via download from https://ga.jspm.io/npm:[email protected]/plugin/
Pinning "lodash-es/" to vendor/javascript/lodash-es/.js via download from https://ga.jspm.io/npm:[email protected]/
Pinning "vscode-jsonrpc/lib/common/" to vendor/javascript/vscode-jsonrpc/lib/common/.js via download from https://ga.jspm.io/npm:[email protected]/lib/common/

And I don't know how to force importmap to resolve directories. For example lodash-es/ has 200+ files inside – should I import every file inside lodash-es manually like bin/importmap pin lodash-es/add.js? I have no idea...

It's easy to just paste

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

right after <%= javascript_importmap_tags %> and Mermaid works. But I want to load all js files from local /assets/ directory. So instead of using external library link I did the following:

1. Downloaded mermaid code like this: npm pack mermaid
2. Unzipped and put mermaid.esm.min.mjs → vendor/javascript/ and chunks/mermaid.esm.min/* → public/mermaid.esm.min/
3. Mass-replaced *.mjs → *.js file names and also mass-replaced *.mjs → *.js in file contents, and also replaced ./chunks/mermaid.esm.min → /mermaid.esm.min
4. Appended to config/importmap.js this — pin 'mermaid', to: 'mermaid.esm.min.js'
5. Added controller app/javascript/controllers/mermaid_chart_controller.js with this content:

import ApplicationController from 'controllers/application_controller'
import mermaid from 'mermaid'

export default class extends ApplicationController {

  async connect() {
    super.connect();
    await mermaid.run({ nodes: [this.element] });
  }

}

6. Now if you add data-controller="mermaid-chart" attribute to the element it's processed by Stimulus and rendered by Mermaid. I've implemented it via stimulus controller to ensure that mermaid's js files are loaded only on pages where mermaid charts are used.

I understand that it's a workaround and I'll have problems with updating mermaid later or if some library clashes occur. So I'm as well interested to know how to import this in a proper way.