在浏览器中部署 Vercel 的 JavaScript 客户端返回“未捕获的语法错误：意外的令牌‘导出’”，即使它在本地运行良好

Question

我正在尝试通过将其作为脚本标签导入并托管在 Vercel 上来使我的库正常工作。

我的 JS 客户端是一个单独的 index.js 文件，它默认导出一个类并在 DOMContentLoaded 上设置一个事件监听器。在本地导入时它运行良好，但在没有生成日志错误的情况下部署到 Vercel 并通过 HTML 脚本导入后，我在将部署导入为 HTML 脚本时收到错误消息：

“Uncaught SyntaxError: Unexpected token 'export'”，指的是我的module.js中的一行代码，是Parcel在构建过程中添加到文件末尾的：

export {$cf838c15c8b009ba$export$2e2bcd8739ae039 默认};

脚本标签的类型设置为“模块”。我的应用程序是一个库，所以我按照 Parcel 的说明提出了这个 package.json 应该可以同时使用 CommonJS 和 ES 模块：

{
  "name": "example-js-client",
  "version": "1.0.0",
  "source": "src/index.js",
  "type": "module",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "scripts": {
    "watch": "parcel watch",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "^2.8.3"
  }
}

我没有运行任何框架，我使用的是 yarn 而不是 npm。我还确保为 Parcel 以及我的节点版本 (16.x) 配置了 Vercel 项目设置。我将不胜感激。

我试过的：

• 添加 --public-url 标志来构建脚本
• 添加 --dist-dir dist 标志来构建脚本
• 添加 --target 浏览器标志来构建脚本
• 在 package.json 中指定“目标”键
• 创建一个vercel.json：

{
  "headers": [
    {
      "source": "/module.js",
      "headers": [
        {
          "key": "Content-Type",
          "value": "application/javascript"
        }
      ]
    }
  ]
}

我希望这些中的任何一个都可以让我简单地使用我导入的库，但这些都没有用。