Next.js项目构建时sharp-win32-x64.node二进制Webpack解析错误求助

错误信息：

./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/build/Release/sharp-win32-x64.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
(Source code omitted for this binary file)

Import trace for requested module:
./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/build/Release/sharp-win32-x64.node
./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/build/Release/ sync ^\.\/sharp\-.*\.node$
./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/lib/sharp.js
./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/lib/input.js
./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/lib/index.js
./src/utils/imageUtils.ts
./src/utils/uploaders/uploadSubCategory.ts
./src/utils/fileUpload.ts
./src/components/overview/HandleUpload.tsx
./src/models/overview/AddSubCategory.tsx
./app/(pages)/overview/page.tsx

已尝试步骤：

• 安装url-loader
• 在next.config.js中添加ignore-loader处理sharp相关文件，但问题未解决

核心原因 #

sharp是Node.js端专属的图像处理库，依赖底层二进制文件，完全无法在浏览器客户端运行。你的客户端组件（如HandleUpload.tsx）中直接导入了sharp，导致webpack打包客户端代码时尝试解析二进制文件，触发解析错误。

解决方案 #

1. 将sharp处理逻辑迁移至服务器端 #

创建API路由专门处理图片格式转换，客户端通过HTTP请求调用该接口完成转换：

步骤1：创建API路由 app/api/convert-to-webp/route.ts

import { NextResponse } from 'next/server';
import sharp from 'sharp';

export async function POST(request: Request) {
  try {
    const formData = await request.formData();
    const file = formData.get('file') as File;

    if (!file) {
      return NextResponse.json({ error: '未上传文件' }, { status: 400 });
    }

    // 将浏览器File对象转为Buffer
    const buffer = await file.arrayBuffer();
    // 使用sharp转换为WebP格式
    const webpBuffer = await sharp(buffer).webp().toBuffer();

    // 返回转换后的WebP文件Blob
    return new NextResponse(webpBuffer, {
      headers: {
        'Content-Type': 'image/webp',
        'Content-Disposition': `attachment; filename="${file.name.replace(/\.[^/.]+$/, '')}.webp"`
      }
    });
  } catch (error) {
    console.error('WebP转换失败:', error);
    return NextResponse.json({ error: '转换失败' }, { status: 500 });
  }
}

步骤2：修改客户端工具类 imageUtils.ts

移除sharp导入，改为调用API接口：

async function convertToWebp(file: File) {
  try {
    const formData = new FormData();
    formData.append('file', file);

    const response = await fetch('/api/convert-to-webp', {
      method: 'POST',
      body: formData
    });

    if (!response.ok) throw new Error('转换请求失败');

    return await response.blob();
  } catch (error) {
    console.error('WebP转换失败:', error);
    return file;
  }
}

export default convertToWebp;

2. 修正next.config.js的webpack配置（可选） #

如果仍有客户端代码意外导入sharp，可以通过webpack规则彻底阻止客户端解析sharp模块：

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  images: {
    domains: ["tailwindui.com", "images.unsplash.com", "uploadthing.com"],
  },
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "en",
  },
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 客户端忽略所有.node二进制文件
      config.module.rules.push({
        test: /\.node$/,
        use: 'ignore-loader'
      });
      // 直接将sharp模块在客户端置为空，避免导入报错
      config.resolve.alias = {
        ...config.resolve.alias,
        sharp: false
      };
    }
    return config;
  },
};

module.exports = nextConfig;

3. 严格区分客户端与服务器端代码 #

检查所有导入sharp的文件，确保只有服务器端代码（API路由、Server Components、服务器工具类）才能导入sharp，客户端组件（标记为'use client'的组件）绝对不能直接引用sharp。

额外注意事项 #

• 确保sharp安装正常：运行pnpm install sharp，如果安装失败，Windows用户需先安装Visual Studio Build Tools，或检查Node.js版本是否符合要求（sharp 0.32.x支持Node.js 16+）。
• 若使用UploadThing等第三方上传服务，可以直接在上传配置中开启格式转换，无需自行处理。

内容的提问来源于stack exchange，提问作者Malek Gara-Hellal