Rails 7迁移至Import Maps遇模块解析错误求助

问题根源 #

你用的pin_all_from是把指定目录下的每个单独文件注册成Import Maps模块，不是把整个目录当成一个可导入的模块。所以直接import "src"或import "vendor_src"会报错——根本不存在叫src或vendor_src的模块，只有src/custom这类单个文件的模块。

解决办法 #

办法1：逐个导入单个文件（最直接）

直接在application.js里导入具体的模块文件，比如：

// application.js
import "src/custom"
// 如果vendor_src下有多个文件，比如utils.js、init.js，就挨个加
import "vendor_src/utils"
import "vendor_src/init"

执行bin/importmap json能看到的那些src/xxx、vendor_src/xxx，就是可以直接导入的模块名。

办法2：创建入口文件统一导入（更整洁）

如果目录下文件多，不想挨个写导入，可以给每个目录加个index.js作为入口：

1. 在app/javascript/src下新建index.js，导入该目录下所有文件：

// app/javascript/src/index.js
import "./custom"
// 有其他文件就继续加，比如 import "./navbar"

2. 在importmap.rb里单独pin这个入口文件：

pin "src", to: "src/index.js"

3. 之后在application.js里就可以直接导入src了：

import "src"

vendor_src目录可以完全照搬这个逻辑，创建vendor/javascript/vendor_src/index.js，pin后导入。

额外清理：去掉Manifest里的冲突配置 #

你现在的manifest里的//= link_tree ../../javascript和//= link_tree ../../../vendor/javascript可以删掉——用Import Maps后不需要Sprockets再处理这些JS文件，留着反而会导致路径冲突，出现你遇到的404错误。

补充说明 #

你之前试的相对路径导入在生产环境不可用是对的，因为生产环境Rails会给JS文件加指纹（比如custom-abc123.js），相对路径找不到指纹后的文件，必须用Import Maps注册的模块名来导入。

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