Next.js 15生产环境点赞功能报错TypeError: f.v2.config is not a function

核心原因 #

虽然点赞操作未直接调用Cloudinary，但生产环境打包时，Cloudinary的模块被意外包含在Server Action的服务端chunk中，且模块解析出现异常——通常是通用版Cloudinary SDK的浏览器端代码与服务端环境不兼容，或导入/打包配置有误导致。

具体解决步骤 #

1. 替换为Cloudinary Node.js专用SDK

卸载通用版cloudinary包，安装服务端专属的@cloudinary/node，避免浏览器端代码混入服务端打包：

npm uninstall cloudinary
npm install @cloudinary/node

2. 修改Cloudinary配置文件

更新配置文件，添加'use server'确保仅在服务端运行，同时修正文件上传函数的参数类型（服务端不支持浏览器File类型）：

'use server';

import { v2 as cloudinary } from '@cloudinary/node';

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_NAME,
  api_key: process.env.CLOUDINARY_KEY,
  api_secret: process.env.CLOUDINARY_SECRET,
});

export async function removeFileFromCloudinary(publicId: string) {
  await cloudinary.uploader.destroy(publicId);
}

// 服务端接收Buffer而非浏览器File对象
export async function uploadFileToCloudinary(buffer: Buffer) {
  const data = await new Promise((resolve, reject) => {
    cloudinary.uploader
      .upload_stream(
        { folder: "nextgram" },
        (err: any, result: any) => {
          if (err) reject(err);
          else resolve(result);
        }
      )
      .end(buffer);
  });
  return data;
}

3. 调整Next.js Webpack配置

在next.config.mjs中添加服务端模块别名，确保Webpack正确解析Cloudinary：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      // 强制服务端使用@cloudinary/node
      config.resolve.alias['cloudinary'] = '@cloudinary/node';
    }
    return config;
  },
};

export default nextConfig;

4. 排查间接导入问题

检查PostService或点赞Action导入的其他模块，确保没有在客户端代码中意外导入Cloudinary相关文件。如果客户端需要展示图片，直接使用Cloudinary CDN链接即可，无需引入SDK。

5. 重新构建生产环境

清理缓存后重新打包：

rm -rf .next node_modules
npm install
npm run build

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