Safari控制台报@hotwired/turbo-rails语法错误，求排查原因

SyntaxError: Unexpected string literal "@hotwired/turbo-rails". import call expects one or two arguments.

该错误在Safari浏览器控制台中显示，指向application.js文件。请问这是可安全忽略的Rails错误、配置不当导致的问题，还是Bug？

相关配置 #

Gemfile #

gem "cssbundling-rails", "~> 1.1"
gem 'turbo-rails'
gem 'importmap-rails'

importmap.rb #

pin "application", preload: true

pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true

pin "popper", to: 'popper.js', preload: true

pin "bootstrap", to: 'bootstrap.min.js', preload: true

pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true

pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

pin "trix"

pin "@rails/actiontext", to: "actiontext.js"

pin "stimulus-autocomplete", to: "https://ga.jspm.io/npm:stimulus-autocomplete@3.0.2/src/autocomplete.js"

pin "choices" # @10.2.0

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

application.js #

import "@hotwired/turbo-rails"

import "popper"

import "bootstrap"

import "controllers"

import * as bootstrap from "bootstrap"

package.json #

{
  "name": "flightrecord",
  "private": "true",
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.2.0",
    "@hotwired/stimulus": "^3.2.1",
    "@hotwired/turbo-rails": "^7.2.4",
    "@popperjs/core": "^2.11.6",
    "@rails/actioncable": "^7.0.3-1",
    "@rails/actiontext": "^7.0.4",
    "@rails/activestorage": "^7.0.3-1",
    "@rails/webpacker": "^5.4.3",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.2",
    "choices.js": "^10.2.0",
    "currency.js": "^2.0.3",
    "dropzone": "^5.9.2",
    "sass": "^1.56.2",
    "sortablejs": "^1.14.0",
    "stimulus-autocomplete": "^3.0.0-rc.2",
    "tributejs": "^5.1.3",
    "trix": "^2.0.3"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3"
  },
  "engines": {
    "node": "19.2.0",
    "yarn": "1.22.19",
    "npm": "6.14.9"
  },
  "scripts": {
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

这是配置冲突导致的问题，既不是可忽略的错误，也不是Rails的Bug。

核心原因是同时混用了两种前端依赖管理方式：

1. Rails 7默认推荐的importmap-rails（通过Gemfile引入，用importmap.rb映射依赖别名）
2. 传统的webpacker（通过package.json管理npm依赖）

Safari的报错是因为浏览器直接解析application.js时，无法识别@hotwired/turbo-rails这个导入语句——Importmap的映射逻辑需要Rails服务器在响应请求时替换这些别名，但Webpacker的存在导致依赖解析逻辑冲突，Importmap没有正确生效。

解决步骤 #

方案一：切换到Importmap（推荐，符合Rails 7规范）

1. 删除package.json中已通过Importmap管理的依赖（如@hotwired/turbo-rails、@hotwired/stimulus），同时移除@rails/webpacker和webpack-dev-server相关配置。
2. 执行命令确保依赖映射正确：

   bin/importmap pin @hotwired/turbo-rails
   bin/importmap pin bootstrap
   

3. 删除Webpacker相关配置文件（如config/webpack目录），确保Rails使用Importmap处理JS资源。
4. 重启Rails服务器，清空浏览器缓存后测试。

方案二：继续使用Webpacker

1. 移除Gemfile中的importmap-rails，执行bundle install。
2. 删除config/importmap.rb文件。
3. 修改application.js，确保导入路径符合Webpack解析规则，比如调整@hotwired/turbo-rails的导入方式。
4. 运行yarn install和yarn build编译资源，重启服务器测试。

另外注意：application.js中重复导入了bootstrap，保留其中一行即可，避免重复加载引发潜在问题。

内容的提问来源于stack exchange，提问作者hellion