Next.js+Sanity项目添加API密钥后出现ModuleParseError编译错误

我用Next.js、React.js和Sanity搭建电商网站，之前项目运行正常，但添加Sanity API密钥后出现编译错误，错误信息如下：

Failed to compile

./seagreen-sheep/node_modules/esbuild/lib/main.d.ts
Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export type Platform = 'browser' | 'node' | 'neutral';
| export type Format = 'iife' | 'cjs' | 'esm';
| export type Loader = 'base64' | 'binary' | 'copy' | 'css' | 'dataurl' | 'default' | 'empty' | 'file' | 'js' | 'json' | 'jsx' | 'text' | 'ts' | 'tsx';

项目的package.json配置：

{
    "name": "ebusinesscard",  
    "version": "0.1.0",
    "private": true,  
    "scripts": {
        "dev": "next dev",
        "build": "next build",  
        "start": "next start",  
        "lint": "next lint"
    },  
    "dependencies": {  
        "@sanity/client": "^3.2.0",
        "@sanity/image-url": "^1.0.1",  
        "@stripe/stripe-js": "^1.25.0",  
        "canvas-confetti": "^1.5.1",  
        "next": "13.2.4",  
        "next-sanity-image": "^3.2.1",  
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-hot-toast": "^2.2.0",
        "react-icons": "^4.3.1",
        "stripe": "^8.209.0"
    }
}

添加后引发错误的Client.js代码：

import sanityCli from "@/seagreen-sheep/sanity.cli";
import { SanityClient } from "@sanity/client";
import { ImageUrlBuilder } from "@sanity/image-url";


export const client = SanityClient({
    projectId: 'hdbv0npd',
    dataset: 'production',
    apiVersion: '2023-03-17',
    useCdn: true,
    token: process.env.NEXT_PUBLIC_SANITY_TOKEN
});

const builder = ImageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);

问题分析 #

这个错误是因为Webpack尝试解析esbuild的TypeScript类型定义文件（.d.ts），但Next.js默认配置未处理这类文件，加上错误引入Sanity CLI专用模块，触发了不必要的依赖链解析。

修复步骤 #

1. 移除无用的sanityCli导入 #

sanityCli是Sanity的命令行工具模块，完全不需要在前端代码中引入，直接删除这行：

// 删除此行
// import sanityCli from "@/seagreen-sheep/sanity.cli";

2. 修正Sanity客户端的导入方式 #

@sanity/client使用默认导出而非命名导出，修改初始化代码：

// 替换命名导入为默认导入
import sanityClient from "@sanity/client";
import { ImageUrlBuilder } from "@sanity/image-url";

export const client = sanityClient({
    projectId: 'hdbv0npd',
    dataset: 'production',
    apiVersion: '2023-03-17',
    useCdn: true,
    token: process.env.NEXT_PUBLIC_SANITY_TOKEN
});

3. 清除缓存并重启服务 #

执行命令清理Next.js缓存，然后重启开发服务：

rm -rf node_modules/.cache
npm run dev

4. （可选）升级依赖版本 #

你的Next.js和Sanity客户端版本偏旧，存在兼容性隐患，可升级到稳定版本：

npm install next@latest @sanity/client@latest @sanity/image-url@latest

验证修复 #

完成上述操作后，重新运行npm run dev，编译错误应当消失。若仍有问题，检查环境变量是否配置正确，以及Sanity项目ID、数据集名称是否与后台一致。

内容的提问来源于stack exchange，提问作者Coded-noob