Next.js 13.4.5引入lqip-modern后出现fs.existsSync错误求助

核心原因 #

lqip-modern依赖的sharp是纯Node.js端库，依赖fs、child_process等仅Node环境提供的API。如果在Next.js的客户端组件（加了'use client'的组件）中调用lqip-modern，浏览器环境没有这些Node模块，就会触发这类错误。

具体解决方案 #

1. 将lqip-modern的代码移到服务器组件
   Next.js 13+的App Router默认组件都是服务器组件（无需添加'use client'），可以直接访问Node.js API。把生成LQIP的逻辑放在服务器组件里，比如：

   // app/components/ImageLQIP.js（服务器组件）
   import lqip from 'lqip-modern';
   import fs from 'fs/promises';
   
   export async function ImageLQIP({ imagePath }) {
     const buffer = await fs.readFile(imagePath);
     const lqipResult = await lqip(buffer);
     return (
       <div style={{ position: 'relative' }}>
         {/* LQIP占位图 */}
         <img 
           src={lqipResult.metadata.dataURIBase64} 
           alt="LQIP placeholder"
           style={{ width: '100%', height: 'auto' }}
         />
         {/* 原图可以后续加载 */}
       </div>
     );
   }
   

2. 修正next.config.js配置
   不要手动修改node_modules里的package.json（修改后npm install会覆盖），用webpack配置处理客户端环境的模块 fallback，同时确保sharp的二进制文件被正确解析：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     webpack: (config, { isServer }) => {
       // 客户端构建时，禁用Node专属模块
       if (!isServer) {
         config.resolve.fallback = {
           ...config.resolve.fallback,
           fs: false,
           child_process: false,
           'detect-libc': false,
         };
       }
       // 处理sharp的.node二进制文件
       config.module.rules.push({
         test: /\.node$/,
         use: 'raw-loader',
       });
       return config;
     },
     // 让服务器组件正确识别sharp的外部依赖
     experimental: {
       serverComponentsExternalPackages: ['sharp'],
     },
   };
   
   module.exports = nextConfig;
   

   注意：如果没有安装raw-loader，先执行npm install raw-loader --save-dev。

3. 避免在客户端直接导入lqip-modern
   所有调用lqip-modern的逻辑都要放在服务器端执行，客户端只接收处理后的结果（比如base64格式的LQIP图片字符串）。

验证方法 #

移除之前对node_modules里detect-libc和sharp的package.json修改，执行npm install重新安装依赖，然后启动项目测试。如果还是报错，检查组件是否误加了'use client'，确保生成LQIP的代码在服务器组件中运行。

内容的提问来源于stack exchange，提问作者Pablo Ballesteros