NextJS/React集成Cloudinary报错：无法添加属性，对象不可扩展

错误原因 #

这个报错的核心原因是Next.js的严格模式（Strict Mode）会冻结某些对象，而Cloudinary的url-gen实例在组件内部创建时，会被严格模式标记为不可扩展，导致库的内部代码无法添加必要的属性。

解决方案 #

1. 将Cloudinary实例移到组件外部创建 #

避免在组件函数内部重复创建Cloudinary实例，把实例初始化放在组件定义之外：

import { Cloudinary } from "@cloudinary/url-gen";
import { AdvancedImage as Image } from "@cloudinary/react";
import { FC } from "react";

// 移到组件外部，只初始化一次
const myCld = new Cloudinary({
  cloud: {
    cloudName: "cloudinary-workspace",
  },
});

interface CloudinaryMediaProps {
  id?: string;
}

export const CloudinaryMedia: FC<CloudinaryMediaProps> = () => {
  const myImage = myCld.image("image");

  return (
    <div>
      <Image cldImg={myImage} />
    </div>
  );
};

2. 临时禁用Next.js严格模式（不推荐长期使用） #

如果上述方法无效，可以在next.config.js中关闭严格模式：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  // 其他配置项
}

module.exports = nextConfig;

注意：严格模式有助于提前发现潜在问题，除非必要不建议长期关闭。

3. 检查依赖版本兼容性 #

确保@cloudinary/url-gen和@cloudinary/react的版本匹配，建议使用官方推荐的配套版本。可以执行以下命令更新依赖：

npm install @cloudinary/url-gen@latest @cloudinary/react@latest

补充说明 #

如果你的组件需要根据props动态生成媒体资源，依然可以在组件内部调用myCld.image()或myCld.video()，只需要保证Cloudinary实例本身是在组件外部初始化的即可。

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