刺激中的 Rails 7 和 Bootstrap 错误 - 无法解析模块说明符 bootstrap

Question

我正在遵循本教程：https://www.hotrails.dev/articles/rails-modals-with-hotwire一切都进展顺利，直到我创建了这个刺激控制器文件：

import { Controller } from "@hotwired/stimulus"
import * as bootstrap from "bootstrap"

export default class extends Controller {
  connect() {
    this.modal = new bootstrap.Modal(this.element)
  }

  open() {
    if (!this.modal.isOpened) {
      this.modal.show()
    }
  }

  close(event) {
    if (event.detail.success) {
      this.modal.hide()
    }
  }
}

我收到此错误：

“无法注册控制器：模态（控制器/modal_controller）类型错误：无法解析模块说明符“bootstrap”。相对引用必须以“/”、“./”或“../”开头。”

更多信息： 我在 gemfile 中有一个 bootstrap gem，bootstrap CSS 类是可访问且可用的。但是 bootstrap js 不可用，我不知道如何使其可用于我的 Rails 7 应用程序。

另外，我在某处看到我必须通过添加引导程序的最后两行来更新 application.js 文件，我想与您确认它是否正确：

import "@hotwired/turbo-rails"
import "controllers" 
import * as bootstrap from "bootstrap" 
window.bootstrap = bootstrap;

如何使 Bootstrap JS 在我的 Rails 7 应用程序中也可用？

谢谢你

更新：

我还做了以下事情：

npm install bootstrap 我更新了

app/javascript/application.js 文件：

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

import * as bootstrap from "bootstrap"

window.bootstrap = bootstrap;

和

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: "bootstrap/dist/js/bootstrap.bundle.min.js", preload: true

但是我仍然没有将 Bootstrap JS 加载到我的应用程序中，并且在控制台中仍然遇到相同的错误：

items:1 Uncaught TypeError: 无法解析模块说明符“bootstrap”。相对引用必须以“/”、“./”或“../”开头。

Answer 1

Rails 默认使用 importmaps，它不使用

node_modules 来查找包：

# config/importmap.rb

pin "bootstrap", to: "https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/[email protected]/lib/index.js"

或者只使用

importmap

 命令：

$ bin/importmap pin bootstrap

import * as bootstrap from "bootstrap"

// or just get what you need
import { Modal } from "bootstrap"

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