在JavaScript中使用Anthropic TypeScript SDK遇MIME类型错误求助

问题根源 #

这个错误核心原因是浏览器无法正确解析你指定的SDK导入路径，导致服务器返回了HTML错误页面（比如404页面），浏览器试图把HTML当作JavaScript模块解析，进而触发MIME类型不匹配的错误。另外，浏览器环境不支持Node.js的process.env对象，这也是一个潜在问题。

修复步骤 #

1. 修正SDK导入路径 #

浏览器不能直接使用Node.js风格的包导入路径，需改用以下两种方式之一：

• CDN导入（最适合快速测试）：修改ai.js中的导入语句为：

  import Anthropic from 'https://cdn.jsdelivr.net/npm/@anthropic-ai/sdk@latest/+esm';
  

• 本地安装后使用正确路径：如果通过npm install @anthropic-ai/sdk本地安装了SDK，确保服务器能访问node_modules目录，然后修改导入路径：

  import Anthropic from '../node_modules/@anthropic-ai/sdk/dist/index.esm.js';
  

2. 替换process.env的使用 #

浏览器环境不存在process.env对象，测试阶段可直接替换为你的API密钥（生产环境建议通过后端代理请求，避免密钥泄露）：

const anthropic = new Anthropic({
  apiKey: '你的ANTHROPIC_API_KEY',
});

3. 验证服务器文件访问 #

检查以下内容确保服务器正常返回文件：

• 确认HTML中<script>标签的type="module"属性正确设置
• 检查文件路径拼写，在浏览器开发者工具的Network标签中查看ai.js及SDK文件的请求状态，确保返回200而非404

完整修正后的代码 #

HTML代码 #

<html>
<head>
</head>
<body>
    <script type="module" src="js/ai.js"></script>
</body>
</html>

JS代码（CDN版本） #

import Anthropic from 'https://cdn.jsdelivr.net/npm/@anthropic-ai/sdk@latest/+esm';

const anthropic = new Anthropic({
  apiKey: '你的ANTHROPIC_API_KEY',
});

async function main() {
  try {
    const message = await anthropic.messages.create({
      max_tokens: 1024,
      messages: [{ role: 'user', content: 'Hello, Claude' }],
      model: 'claude-3-opus-20240229',
    });

    console.log(message.content);
  } catch (error) {
    console.error('请求出错:', error);
  }
}
main();

内容的提问来源于stack exchange，提问作者David Ndckr