在Vercel部署Next.js应用时遇‘npm run build’ SIGABRT错误如何解决？

错误发生在配置next.config.mjs以让Plaiceholder适配Next.js之后，原始配置代码如下：

import withPlaiceholder from '@plaiceholder/next';

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: "https",
                hostname: "cdn.sanity.io"
            }
        ]
    },
    experimental: {
        taint: true,
    },
};

export default withPlaiceholder(nextConfig);

我尝试转译@plaiceholder/next和sharp包，同时修改webpack配置添加sharp的外部依赖规则，但问题未解决，调整后的配置代码如下：

const nextConfig = {
    webpack(config) {
        const sharpRule = {
          sharp: 'commonjs sharp',
        };

        if (Array.isArray(config.externals)) {
          config.externals.push(sharpRule);
        } else {
          config.externals = {
            ...config.externals,
            ...sharpRule,
          };
        }

        return config;
      },
    transpilePackages: ['@plaiceholder/next', "sharp"],
    images: {
        remotePatterns: [
            {
                protocol: "https",
                hostname: "cdn.sanity.io"
            }
        ]
    },
    experimental: {
        taint: true,
    },
};

解决方法 #

• 移除transpilePackages中的sharp，sharp是原生C++模块，不需要转译，强行转译会引发兼容问题
• 恢复使用withPlaiceholder包裹配置的原始写法，不需要额外修改webpack的externals配置，@plaiceholder/next已经内置了sharp的适配逻辑
• 检查并对齐依赖版本，确保sharp版本与@plaiceholder/next的要求匹配，可执行以下命令重新安装依赖：

npm uninstall sharp @plaiceholder/next
npm install @plaiceholder/next sharp

• 若使用Next.js 13+ App Router，需确保Plaiceholder的图片处理逻辑运行在服务器组件中，避免在客户端组件中调用相关API

内容的提问来源于stack exchange，提问作者Orlando Guichard