使用Ruby on Rails+Import Map在Firefox 115中遇alpinejs裸标识符错误

问题根源 #

你遇到的Uncaught TypeError是因为Import Map未正确映射alpinejs这个裸模块标识符（bare specifier）——仅声明pin "alpinejs"但未指定模块的加载源，浏览器无法找到该模块的实际地址。

修复步骤 #

1. 修正Import Map配置
   你需要给alpinejs的pin规则添加明确的源地址，最简单的方式是用Rails提供的importmap pin命令自动生成：

   bin/importmap pin alpinejs@3.13.7
   

   执行后，config/importmap.rb会自动更新为包含CDN地址的正确配置：

   pin "pages", to: "pages.js", preload: true
   pin "alpinejs", to: "https://ga.jspm.io/npm:alpinejs@3.13.7/dist/module.esm.js", preload: true
   

   也可以手动写入上述配置，确保版本号与你注释的@3.13.7一致。

2. 修复JS事件监听逻辑
   你的pages.js中直接执行了window.Alpine.start()，会导致Alpine在DOM加载完成前就初始化，可能引发额外问题，需要改为传递函数引用：

   import Alpine from 'alpinejs'
   window.Alpine = Alpine
   document.addEventListener("DOMContentLoaded", () => window.Alpine.start())
   

3. 重启服务并测试
   重启Rails开发服务器，刷新Firefox 115页面，错误即可解决。

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