Rails7使用NPM包遇Importmap报错及tzinfo-data问题求助

一、Importmap 403 错误处理 #

问题根源 #

• Importmap 默认依赖 jsdelivr CDN 拉取包，部分网络环境下会被限制返回 403
• 手动安装 Importmap 时，可能遗漏必要的配置或初始化步骤，导致包拉取逻辑异常

解决步骤 #

1. 切换国内 CDN 源
   编辑 config/importmap.rb，把默认的 jsdelivr 地址替换为国内可用的镜像（比如 BootCDN）：

   pin "react", to: "https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.production.min.js"
   pin "react-dom", to: "https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"
   

   若需要全局替换源，在 config/application.rb 中添加：

   config.importmap.packager = Importmap::Packager.new(
     cdns: ["https://cdn.bootcdn.net/ajax/libs"]
   )
   

2. 本地引入包文件
   如果 CDN 方式仍无法使用，直接将需要的 NPM 包下载到 vendor/javascript 目录，然后在 importmap.rb 中本地引用：

   pin "lodash", to: "vendor/javascript/lodash.min.js"
   

3. 补全 Importmap 安装流程
   手动安装后，务必执行初始化命令生成必要配置文件和目录：

   rails importmap:install
   

二、tzinfo-data 安装错误处理 #

解决步骤 #

1. 锁定版本安装
   在 Gemfile 中明确指定 tzinfo-data 的版本，避免版本兼容问题：

   gem 'tzinfo-data', '~> 1.2023.3'
   

   执行以下命令完成安装：

   bundle install
   

2. 本地安装 gem 包
   若网络拉取失败，手动下载对应版本的 tzinfo-data gem 文件，执行本地安装：

   gem install tzinfo-data-1.2023.3.gem --local
   

3. 切换国内 gem 源
   将默认的 rubygems 源替换为国内镜像（比如 Ruby China）：

   gem sources --remove https://rubygems.org/
   gem sources --add https://gems.ruby-china.com/
   

   之后再运行 bundle install 即可。

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