importmap-rails: Popper.js not working when --download is used

I apologize in advance if this is not a importmap problem, I am still learning to use it.

I have problem with bootstrap configuration through importmaps, for some reason when I run bin/importmap pin bootstrap --download I am getting these errors in chrome console (jsdelivr, unpkg) cdn providers

GET http://localhost:3000/assets/modifiers/index.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-ce872054c46039b8d5939756969a7a008e8d1ab3907e72b141e9e4650641b9ea.js:1 GET http://localhost:3000/assets/enums.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-ce872054c46039b8d5939756969a7a008e8d1ab3907e72b141e9e4650641b9ea.js:6 GET http://localhost:3000/assets/popper.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-ce872054c46039b8d5939756969a7a008e8d1ab3907e72b141e9e4650641b9ea.js:8 GET http://localhost:3000/assets/popper-lite.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-ce872054c46039b8d5939756969a7a008e8d1ab3907e72b141e9e4650641b9ea.js:4 GET http://localhost:3000/assets/createPopper.js net::ERR_ABORTED 404 (Not Found)

when I use command without download option like this bin/importmap pin bootstrap it works properly…not sure what is the problem in both commands it uses same cdn link

errors below are from JSPM cdn provider

GET http://localhost:3000/_/40866a73.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/enums.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/index.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/eventListeners.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/popperOffsets.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/offset.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/applyStyles.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/flip.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/preventOverflow.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/arrow.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/hide.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/popper-lite.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/utils/detectOverflow.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getBoundingClientRect.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getCompositeRect.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getNodeScroll.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getWindowScroll.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getWindow.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/instanceOf.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getHTMLElementScroll.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getNodeName.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getWindowScrollBarX.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getDocumentElement.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/isScrollParent.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getComputedStyle.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getLayoutRect.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/listScrollParents.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getParentNode.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getOffsetParent.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/08d18af5.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/03a0b0f1.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/5328de10.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/utils/getMainAxisFromPlacement.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/8937ec25.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/utils/getOppositePlacement.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/utils/computeAutoPlacement.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/utils/getOppositeVariationPlacement.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/ea19fa71.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/8d8f2f4c.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/c591086d.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/6e98d37c.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/computeStyles.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getDocumentRect.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getViewportRect.js 404 (Not Found)

javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"

import "@popperjs/core"
import "bootstrap"

config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.js"
pin "@hotwired/stimulus", to: "stimulus.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
pin "bootstrap" # @5.1.3
pin "@popperjs/core", to: "@popperjs--core.js" # @2.10.2

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 7
Comments: 23 (12 by maintainers)

Commits related to this issue

bug #50408 [AssetMapper] Change default importmap "provider" to JsDelivr+esm (weaverryan, nicolas-grekas) This PR was merged into the 6.3 branch. Discussion ---------- [AssetMapper] Change default ... — committed to symfony/symfony by nicolas-grekas a year ago

Most upvoted comments

Note as a quick fix you can also define it - <script>window.process = { env: {} }</script>

+12

guybedford on Dec 22, 2021

My solution for this problem is: Going to bootstrap doc, download the file directly on CDN then, put it into vendor/ directory like this.

vendor/
     bootstrap.min.js
     popper.min.js

In the importmap.rb code just select the right name:

# Added libraries
pin "bootstrap", to: "bootstrap.min.js" 
pin "@popperjs/core", to: "popper.min.js"

Then import them normally, in application.js.

import "bootstrap"
import "@popperjs/core"

darkamenosa on Jun 14, 2022

Would be nice perhaps with an FAQ about how to resolve particular packages that don’t just work out of the box. If anyone wants to explore that, please open a PR for it.

dhh on Jun 18, 2022

if (process.env.NODE_ENV !== "production") …uggh that’s an annoying branch to begin with, regardless of esm. Is that common for dist packages to do?

Can confirm modifying my importmap.rb to explicit /esm/index.js resource works. Sort of a bummer since this is a common hello world setup

rromanchuk on Dec 31, 2021

Wow, thanks @vietqhoang!

This now works perfectly for me with latest:

1. Pin from JSDelivr

./bin/importmap pin @popperjs/core@latest/+esm --download --from jsdelivr

2. Add the fix for `process.env`

<!-- In app/views/layouts/application.html.erb -->
<script>
  window.process = { env: { NODE_ENV: 'production'} }
</script>

3. [Optional] Rename

Because I want audit and outdated to work, I manually changed the pin name:

# From this:
pin "@popperjs/core/+esm", to: "@popperjs--core--+esm.js" # @2.11.8

# To this:
pin "@popperjs/core", to: "@popperjs--core--+esm.js" # @2.11.8

That’s all!

✅ One-line install (with some minor manual file tweaking) ✅ No manually copying of vendor files ✅ Correctly bundles all dependencies in a single file ✅ audit and outdated commands work correctly ✅ Easily updatable (just run the command again)

It would be even better if we could specify the pin name as an argument to bin/importmap pin. That way we could eliminate Step 3 entirely.

AnalyzePlatypus on Dec 4, 2023