Next.js 13集成Formidable时遭遇插件加载错误求解决方案

遇到的错误：

Critical dependency: the request of a dependency is an expression
error - Error: Cannot find module 'C:\Users\jacob\Documents\GitHub\pim-nextjs-ts\yakpim.next\server\app\api\rest\file\plugins\octetstream.js'

触发代码：

export async function POST(request: NextApiRequest, response: NextApiResponse) {
    console.log("success"); // 此语句可正常执行

    const form = formidable({ multiples: true }); // 此语句触发错误
}

以下是可行的解决方法：

• 改用CommonJS方式导入Formidable
  Next.js 13 App Router默认使用ES模块，而Formidable的动态导入逻辑在ES模块环境下会出现路径解析错误。可以通过创建require对象来导入：

  import { createRequire } from 'module';
  const require = createRequire(import.meta.url);
  const formidable = require('formidable');
  
  export async function POST(request: NextApiRequest, response: NextApiResponse) {
    console.log("success");
    const form = formidable({ multiples: true });
    // 后续处理逻辑
  }
  

• 配置Next.js转译Formidable包
  在next.config.js中添加transpilePackages配置，让Next.js手动转译Formidable的代码，避免动态导入路径被错误解析：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    transpilePackages: ['formidable'],
  }
  
  module.exports = nextConfig;
  

  修改完成后重启开发服务器，或重新执行build命令。

• 降级Formidable版本
  部分v3.x版本的Formidable在Next.js 13 App Router环境下兼容性较差，可尝试降级到v2.x稳定版本：

  yarn add formidable@2.1.1
  

  重新安装依赖后测试代码是否正常运行。

• 使用Next.js原生FormData处理（替代方案）
  如果不想依赖Formidable，Next.js 13原生支持通过request.formData()处理文件上传，无需额外依赖：

  export async function POST(request: Request) {
    const formData = await request.formData();
    const files = formData.getAll('file'); // 替换为你的上传字段名
    // 处理文件的逻辑，比如保存到本地或云存储
    return new Response(JSON.stringify({ msg: '文件处理完成' }), { status: 200 });
  }
  

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