You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.20 12:18:27