Rails 7 Import Map引入Vega类库时出现vega-loader导出错误

问题场景 #

使用Rails 7的Import Map功能构建图表，执行以下pin命令引入Vega相关库：

./bin/importmap pin vega@5
./bin/importmap pin vega-lite@5
./bin/importmap pin vega-embed@6

但浏览器控制台出现错误：

Uncaught SyntaxError: The requested module 'vega-loader' does not provide an export named 'default'

问题根源 #

默认通过importmap pin拉取的vega-loader是Node.js环境适配版本，而浏览器环境需要专用的浏览器构建版本，后者才具备正确的导出格式。

解决步骤 #

手动修改项目根目录下的config/importmap.rb，添加vega-loader浏览器版本的映射规则：

# 保留原有依赖的pin配置
pin "vega", to: "https://ga.jspm.io/npm:vega@5.22.1/build/vega.module.js"
pin "vega-lite", to: "https://ga.jspm.io/npm:vega-lite@5.6.0/build/src/index.js"
pin "vega-embed", to: "https://ga.jspm.io/npm:vega-embed@6.21.0/build/vega-embed.module.js"

# 新增vega-loader的浏览器版本映射
pin "vega-loader", to: "https://ga.jspm.io/npm:vega-loader@4.5.0/build/vega-loader.browser.module.js"

修改完成后刷新页面，错误即可消除。

逻辑说明 #

你提供的JSPM示例代码已经正确使用了vega-loader的浏览器构建版本（vega-loader.browser.module.js），但Rails Import Map默认pin的是通用版本，导致导出格式不兼容。手动指定浏览器专用模块后，就能匹配Vega库的导入要求。

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