ruby-on-rails

Unable to resolve specifier 'popper' imported from | Dropdown of bootstrap in Rails 7 with importmap doesn't work

I'm trying to use the dropdown function of bootstrap with importmap and already pinned both boostrap and popper but it does not work

My application.js is as follows:

import "@hotwired/turbo-rails"
import "controllers"
import "bootstrap"
import "popper"
import "@popperjs/core"
import "@fortawesome/fontawesome-free"

config/importmap.rb

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.2/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.6/dist/esm/index.js"
pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.2.0/js/all.js"

This happened when I clicked the link showed in the console

import "@hotwired/turbo-rails"
import "controllers"
import "bootstrap"
import "popper";

This showed in my console

Uncaught Error: Unable to resolve specifier 'popper' imported from http://127.0.0.1:3000/assets/application-8b4b95736718a0fcee6267f7d3b80537828999e5cbd5f3a04eaacbed2ab415bf.js

Also, my fontawesome doesn't work as well

Solution

  • I just found that I used the wrong bootstrap version (I installed 5 but used the 4 version template) Importmap works!!