Rails 6使用Import maps+Stimulus Heroku生产环境JS报错Unknown Content-Type text/html

解决方案 #

• 首先确认资源预编译规则配置
  该报错本质是请求JS资源时返回了HTML格式内容，大概率是生产环境预编译未包含目标JS文件，直接访问报错信息里的JS路径即可验证是否返回的是404页面。
  检查config/initializers/assets.rb，添加如下规则将importmap相关JS纳入预编译范围：

  Rails.application.config.assets.precompile += %w( es-module-shims.js application.js )
  

  同时检查app/assets/config/manifest.js，确保存在JS资源的关联配置：

  //= link_tree ../javascripts .js
  

• 生产环境静态资源响应头配置
  若确认资源存在但响应头异常，修改config/environments/production.rb中的静态资源服务配置，指定JS文件的Content-Type：

  config.public_file_server.headers.merge!({
    'Content-Type' => 'text/javascript; charset=utf-8'
  })
  # 若需要更精细的匹配规则，可引入rack-contrib的Rack::ContentType中间件统一处理
  

• 清理冗余构建配置
  执行heroku buildpacks查看你的Heroku应用构建包列表，移除不需要的Node.js构建包，仅保留heroku/ruby即可，避免无Webpack配置时Node构建包执行异常干扰资源编译流程。
• 验证修复效果
  配置修改后重新推送到Heroku触发构建，构建完成后可执行heroku run bash进入实例，查看public/assets目录下是否存在对应的es-module-shims开头的JS文件，确认资源存在后再访问页面验证JS功能。

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