Skip to content

Relative paths in importmaps js default to my domain #295

@34code

Description

@34code

I have the following importmap.rb file..

# Pin npm packages by running ./bin/importmap
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "application", preload: true
pin "@rails/actioncable/src", to: "@rails--actioncable--src.js" # @8.0.100
pin "@hotwired/stimulus", to: "@hotwired--stimulus.js" # @3.2.2
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin "stimulus-autocomplete", to: "https://ga.jspm.io/npm:[email protected]/src/autocomplete.js"
pin "@rails/request.js", to: "@rails--request.js.js" # @0.0.11
pin "stimulus-scroll-to", to: "https://ga.jspm.io/npm:[email protected]/dist/stimulus-scroll-to.mjs"
pin "smoothscroll-polyfill" # @0.4.4
pin "vega", to: "vega.js"
pin "vega-lite", to: "vega-lite.js"
pin "vega-embed", to: "vega-embed.js"
pin "mapkick/bundle", to: "mapkick.bundle.js"

pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from "app/javascript/custom", under: "custom"

pin "https" # @2.1.0
pin "tslib" # @2.8.1
pin "medium-zoom" # @1.1.0
pin "@hotwired/hotwire-native-bridge", to: "@hotwired--hotwire-native-bridge.js" # @1.0.0
pin "@zxing/library", to: "@zxing--library.js" # @0.21.3
pin "ts-custom-error" # @3.3.1
pin "clientjs" # @0.2.1
pin "ahoy", to: "ahoy.js"
pin "mapkick" # @0.2.6
pin "@stimulus-components/scroll-to", to: "@stimulus-components--scroll-to.js" # @5.0.1
pin "drift-zoom" # @1.5.1
pin "tailwindcss-animate" # @1.0.7
pin "tailwindcss/plugin", to: "tailwindcss--plugin.js" # @2.1.0

pin "flowbite", to: "https://cdn.jsdelivr.net/npm/flowbite@next/dist/flowbite.turbo.min.js"

Some are CDN references, some local, and some added via the command line (e.g. bin/importmap add @zxing/library)

I would love to eventually move all the CDN references to command line driven ones as then i can automatically update all libs as and when needed with just a single command line command!

Currently any pins added from command line via searching npm default the relative paths from those js files to my domain.
For example the @zxing/library package makes heavy use of relative paths requiring files like ../_/DUXuLuCP.js.. Importmaps, by default, assumes this relative path is on my domain. It is not available on my domain and 404s. I wasn't even aware of this until I tried firefox for a change and saw all these error logs in console (see attached).

Looking for any pointers on how I can tackle this or a change in the default hostname behavior to be dynamic somehow. Otherwise I plan to resort to CDN references for @zxing/library and update the versions manually (which is probably safer than a sudden update of all JS libs due to clashing potential and other integration issues with JS in general).. but i will lose the ability to update all importmaps at once!

Hopefully WASM means we will someday have robust ruby libs on the client side too and this whole JS integration can be bypassed.. until then, what would be a proposed solution to this problem?

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions