生产环境中的 Rails Importmap 加载不正确的 JavaScript 文件（MIME 类型“text/html”）

Question

我使用 Rails 7 和 importmaps 来管理 JavaScript 模块。我的应用程序在开发中运行良好，但在生产中，某些 JavaScript 文件无法加载，并在控制台中出现以下错误：

Loading module from “https://example.com/assets/channels/chat_channel” was blocked because of a disallowed MIME type (“text/html”).
Loading failed for the module with source “https://example.com/assets/controllers/application”.

在生产中，应该对这些模块的正确 URL 进行指纹识别（例如，https://example.com/assets/channels/chat_channel-<>digest<>.js），但浏览器会尝试在不加载它们的情况下加载它们摘要不存在，导致 404 错误并加载 HTML 404 页面。

渲染的 HTML 中的导入映射正确指向指纹路径。但是，浏览器不断尝试加载未指纹识别的 URL。

解决方案尝试：

•   Ensured assets are precompiled.
•   Verified importmap in HTML has the correct URLs.
•   Verified my server serves the correct MIME types for .js files.

Answer 1

该问题是由导入语句中使用相对路径引起的。当您使用相对路径（例如，从“./consumer”导入消费者）时，浏览器会根据文件系统解释这些路径，完全绕过导入映射。这会导致浏览器查找生产中不存在的非指纹资源路径，从而导致 404 错误和 MIME 类型问题。

要解决此问题，您需要更改导入语句以匹配导入映射中定义的确切模块说明符。具体来说，请避免在所有 JS 文件中使用相对路径并使用模块说明符。以下是您应该如何更新导入：

不正确（使用相对路径）：

import consumer from "./consumer";
import chatChannel from "./chat_channel";

正确（使用模块说明符）：

import consumer from "consumer";
import chatChannel from "channels/chat_channel";