导入地图+刺激：JS“未知内容类型文本/html”中的错误

Posted 2023-02-15

【中文标题】导入地图+刺激：JS“未知内容类型文本/html”中的错误

【英文标题】：Import maps + Stimulus: error in JS "Unknown Content-Type text/html"

【发布时间】：2021-12-02 22:10:26

【问题描述】：

我的第一个 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

我想知道是不是因为我使用 How to completely remove webpack and all its dependencies from Rails App 从我的应用程序中删除了 Webpack。我删除了它，因为我在 Heroku 中遇到了与 Webpack 相关的构建错误，而且我的理解是，如果我使用导入映射，我不需要 Webpack。

不久前，我通过在其netlify.toml 配置中包含此问题，在 Netlify 上的一个静态站点中修复了一个类似问题：

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

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

如果有帮助，这里是回购：https://github.com/fpsvogel/plainreading

【参考方案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 工作没有错误。