返回

如何修复 React + Vite 构建 Chrome 扩展程序时的错误？

javascript

修复“构建 Chrome 扩展程序时 React + Vite 报错”

简介

构建 Chrome 扩展程序时，遇到“Error while building Chrome Extension w/ React + Vite”错误？不用惊慌，本指南将逐步带你解决此问题。

错误解释

此错误表示加载模块脚本时出错，服务器响应的 MIME 类型为“text/plain”，而 HTML 规范要求模块脚本的 MIME 类型为“text/javascript”。

解决方案

1. 检查 <script> 标签

  • 确保 <script> 标签的 type 属性设置为 "module"。
<script type="module" src="./index.js"></script>

2. 配置 Vite

  • 在 vite.config.js 文件中，确保 build.rollupOptions.output 配置的 format 设置为 "iife"。
export default defineConfig({
  ...
  build: {
    rollupOptions: {
      output: {
        format: 'iife'
      }
    }
  }
});

3. 检查 manifest.json

  • 确保 manifest.json 文件中引用的 JavaScript 文件路径正确。

4. 排除其他因素

  • 更新 Chrome 浏览器到最新版本。
  • 尝试在隐身模式下加载扩展程序。
  • 检查是否有其他错误，如语法错误或导入问题。

示例代码

以下是一个包含正确 <script> 标签的完整 index.html 文件示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
  </head>
  <body>
    <script type="module" src="./index.js"></script>
  </body>
</html>

常见问题解答

  • 为什么 type 属性设置为 "module" 如此重要？

    • 模块脚本被延迟加载并允许异步执行，需要将 type 属性设置为 "module"。

  • 我可以使用其他 format 值吗？

    • 虽然 "iife" 格式适用于 Chrome 扩展程序，但你也可以使用 "esm" 或 "cjs" 格式，具体取决于你的需要。

  • 此错误还可能由什么原因引起？

    • MIME 类型不正确
    • <script> 标签配置不当
    • Vite 配置错误
    • 存在其他错误

  • 我如何避免此错误在未来发生？

    • 始终遵循最佳实践，如使用正确的 MIME 类型和<script> 标签配置。
    • 定期检查 Vite 配置以确保其是最新的。

  • 其他提示是什么？

    • 使用调试工具（如 Chrome DevTools）检查网络请求和错误。
    • 加入 Chrome 扩展程序开发社区寻求帮助。