导入地图 + Stimulus：JS 错误 "Unknown Content-Type text/html"

Question

我的第一个 Rails 应用程序出现 JS 问题，我怀疑这与我使用导入映射而不是 Webpack 有关。我搜索了又搜索，但没有找到任何关于此的讨论。

这是一个 Rails 6 应用程序，带有一些通过 Stimulus 的 JS，我通过添加 importmap-rails 然后 stimulus-rails 安装了它。它在本地运行良好，但在 Heroku 的生产环境中，JS 不起作用，我在浏览器控制台中看到这样的错误：Uncaught (in promise) Error: Unknown Content-Type "text/html; charset=utf-8" doFetch https://plainreading.herokuapp.com/assets/es-module-shims-424762490b07cc7f9a37745e8b53356bca11997a8e313f47d780e29009df7e8e.js:580

我想知道这是否是因为我使用从我的应用程序中删除了 Webpack。我删除它是因为我在 Heroku 中遇到 Webpack-related 构建错误，据我所知，如果我使用导入映射，我不需要 Webpack。

不久前，我通过将其包含在其 netlify.toml 配置中来解决了 Netlify 静态站点中的类似问题：

[[headers]]
  for = "/*.js"
  [headers.values]
    Content-Type = "text/javascript; charset=utf-8"

我找不到 Heroku 的任何类似配置。因此，我尝试在应用程序中自定义响应 headers，但我找不到对我的 JS 文件执行此操作的方法，仅针对主要 HTML 响应和 public 资产.

这里是回购以防它有帮助：https://github.com/fpsvogel/plainreading

Answer 1

最后我通过执行以下操作解决了问题：

安装 Rails 7 alpha。
使用导入地图创建测试项目：rails _7.0.0.alpha2_ new importmap-test。（您可以使用 -j 设置不同的 JS 捆绑选项，例如 -j esbuild，但默认是导入映射。）
将我的主要项目升级到 Rails 7 alpha。
在我的主项目中，将所有JS相关的代码都和测试项目中对应的代码完全一致。对我来说，这意味着覆盖 app/javascript/controllers/index.js.

然后我的 JS 运行没有错误。

导入地图 + Stimulus：JS 错误 "Unknown Content-Type text/html"

Import maps + Stimulus: error in JS "Unknown Content-Type text/html"

javascript

ruby-on-rails

heroku

http-headers

webpack