Next.js集成remark42遇.mjs模块加载失败（MIME类型错误）

核心问题本质 #

浏览器抛出的MIME类型错误，源于加载.mjs模块脚本时，服务器返回的文件类型不符合标准规范；或是你的脚本加载逻辑中，模块与非模块脚本的处理规则冲突。

具体修复方案 #

方案1：修正脚本扩展名与加载逻辑 #

你的代码中注释提示需将扩展名改为.mjs，但实际代码未更新，同时模块脚本的处理逻辑需调整以适配不同浏览器：

<script
  dangerouslySetInnerHTML={{
    __html: `var remark_config = { host: 'http://localhost:8080', site_id: 'remark', components:['embed'] }`
  }}
></script>
<script
  dangerouslySetInnerHTML={{
    __html: `!function (e, n) { 
      for (var o = 0; o < e.length; o++) { 
        var r = n.createElement("script"), 
            c = "noModule" in r ? ".js" : ".mjs", // 按浏览器支持动态选扩展名
            d = n.head || n.body; 
        if ("noModule" in r) {
          r.noModule = true;
        } else {
          r.type = "module";
        }
        r.defer = true;
        r.src = remark_config.host + "/web/" + e[o] + c; 
        d.appendChild(r); 
      } 
    }(remark_config.components || ["embed"], document);`
  }}
></script>

• 关键调整：给不支持ES模块的浏览器加载.js文件，支持的加载.mjs，并通过noModule属性明确区分两类脚本，避免浏览器混淆。

方案2：检查remark42本地服务的MIME配置 #

若修改脚本后仍报错，需确认本地remark42服务是否正确配置了.mjs文件的MIME类型：

• 直接访问http://localhost:8080/web/embed.mjs，在浏览器开发者工具的网络面板查看响应头的Content-Type，确认是否为application/javascript或text/javascript。
• 若类型不符，需调整remark42的服务配置，添加.mjs对应application/javascript的MIME映射。

方案3：改用Next.js官方Script组件（推荐） #

Next.js提供的Script组件更安全且符合框架规范，能优化脚本加载时机：

import Script from 'next/script';

function Remark42Comments() {
  return (
    <>
      <Script id="remark42-config" strategy="beforeInteractive">
        {`
          var remark_config = { 
            host: 'http://localhost:8080', 
            site_id: 'remark', 
            components:['embed'] 
          };
        `}
      </Script>
      <Script id="remark42-loader" strategy="lazyOnload">
        {`
          !function (e, n) { 
            for (var o = 0; o < e.length; o++) { 
              var r = n.createElement("script"), 
                  c = "noModule" in r ? ".js" : ".mjs", 
                  d = n.head || n.body; 
              if ("noModule" in r) {
                r.noModule = true;
              } else {
                r.type = "module";
              }
              r.defer = true;
              r.src = remark_config.host + "/web/" + e[o] + c; 
              d.appendChild(r); 
            } 
          }(remark_config.components || ["embed"], document);
        `}
      </Script>
      <div id="remark42"></div>
    </>
  );
}

export default Remark42Comments;

• 用beforeInteractive加载配置脚本，确保页面交互前完成配置；lazyOnload加载加载器脚本，优化页面性能。
• 必须保留<div id="remark42"></div>，作为remark42评论组件的挂载容器。

方案4：降级使用非模块脚本 #

如果以上方案均无效，可强制加载.js版本脚本，跳过模块加载逻辑：

<script
  dangerouslySetInnerHTML={{
    __html: `var remark_config = { host: 'http://localhost:8080', site_id: 'remark', components:['embed'] }`
  }}
></script>
<script
  src="http://localhost:8080/web/embed.js"
  defer
  async
></script>

• 直接引入.js版本，规避模块类型的MIME问题，适合兼容性要求较高的场景。

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