Rails 7中浏览器忽略Importmap引入的JavaScript包问题求助
Rails 7 Importmap 相关问题求助
上周跟着两篇不同教程开发Rails 7项目,其他功能正常,但遇到三类核心问题——浏览器似乎完全忽略了Importmap脚本标签引入的JavaScript包:
- DHH的Rails 7演示里,LocalTime包无法渲染文章发布时长(比如"10 minutes ago")
- 同一演示中,Turbo包无法实现视图实时更新
- Learnetto教程里,无法导入app/javascript目录下的React组件
以下是LocalTime问题的详细信息,供排查参考:
版本与Gem信息
Rails version: 7.0.3.1 Ruby version: 3.0.0p0 Gemfile: gem "importmap-rails"(Rails新项目默认包含) Gemfile.lock: importmap-rails (1.1.5) 浏览器:Safari 15.6(已启用JavaScript,也测试过Chrome)
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-loding.js", preload: true pin_all_from "app/javascript/controllers", under: "controllers" pin "trix" pin "@rails/actiontext", to: "actiontext.js" pin "local-time", to: "https://ga.jspm.io/npm:local-time@2.1.0/app/assets/javascripts/local-time.js"
app/javascript/application.js 代码
import "@hotwired/turbo-rails" import "controllers" import "trix" import "@rails/actiontext" import LocalTime from "local-time" LocalTime.start()
application.html.erb(head标签内)
<%= javascript_importmap_tags %>
浏览器开发工具中渲染的相关代码
<!DOCTYPE html> <html> <head> <script type="importmap" data-turbo-track="reload"> ***(预期的所有导入均存在,包括关键的:)*** "local-time": "https://ga.jspm.io/npm:local-time@2.1.0/app/assets/javascripts/local-time.js", </script> <link rel="modulepreload" href="...."> ***(共4个此类标签)*** </head>
视图代码(app/views/posts/show.html.erb)
Posted <%= time_tag post.created_at, "data-local": "time-ago" %>
预期与实际效果
- 预期:
Posted 10 minutes ago - 实际:
Posted August 19, 2022 19:57(和未加data-local: "time-ago"时的结果完全一致)
已尝试的解决方法
- 在importmap.rb和application.js中添加不存在的测试包,既没有触发错误,假包也没有出现在浏览器的脚本标签中
- 下载LocalTime包到
vendor/javascripts目录,替换CDN引入方式,但问题依旧
附带问题
如何测试浏览器中是否有Importmap相关的JavaScript在正常运行?
恳请各位提供解决方案或排查思路。
内容的提问来源于stack exchange,提问作者Jeff Zivkovic
相关产品推荐
相关产品推荐

