Next JS / React: Cloudinary error: Cannot add property __, object is not extensible

Roger Riands 0
Viewed 35

I'm trying to load media (image and videos) from Cloudinary in a NextJS App, I'm following the API documentation and my code is basically the same as the examples in the docs.

my code:

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

interface CloudinaryMediaProps {
  id?: string;
}

export const CloudinaryMedia: FC<CloudinaryMediaProps> = () => {
  const myCld = new Cloudinary({
    cloud: {
      cloudName: "cloudinary-workspace",
    },
  });

  const myImage = myCld.image("image");

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

With this simple example, I'm getting the following error:

Unhandled Runtime Error
TypeError: Cannot add property __, object is not extensible

Cloudinary error: Cannot add property __, object is not extensible

Does someone know how can I resolve this error? Or if I'm missing something?

cloudinary next.js reactjs
1 Answers

The following Cloudinary packages have to be installed in your environment:

  • @cloudinary/url-gen
  • @cloudinary/react

See here for a working sample code: https://replit.com/@ecptest/AdvanceImageTest#pages/cldfrontendsdk.tsx

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

interface CloudinaryMediaProps {
  id?: string;
}

export const CloudinaryMedia: React.FC<CloudinaryMediaProps> = () => {
  const myCld = new Cloudinary({
    cloud: {
      cloudName: "demo",
    },
  });

  const myImage = myCld.image("sample");
  myImage.format("jpg");

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

Also, you will need to have to sign up for an account with Cloudinary (i.e., for the parameter cloudName = <cloudinary_cloud_name>).

Additionally, it is also necessary to use the public_id of the asset that is already available in your Media Library account, which is the unique identifier of the asset and is either specified when uploading the asset to your Cloudinary account or automatically assigned by Cloudinary (see Upload images for more details on the various options for specifying the public ID). It can also be divided into folders for more structured delivery URLs, which can be done by separating the elements with slashes (/).

const myImage = myCld.image("<public_id>");
epasos_5730
Related