[Bug] Duplicate iframes created when <CldUploadWidget /> re-renders

[yawuxi]

Bug Report

Describe the bug

The bug occurs when using conditional rendering: <CldUploadWidget /> can create multiple iframes instead of just one.

Is this a regression?

I'm not sure. I will check if this issue existed in previous versions and update the report accordingly."

Steps To Reproduce the error

1. Create a new empty React/Next.js project.
2. Install next-cloudinary@^6.16.0.
3. Render the <CldUploadWidget /> component.
4. Create a state variable with an initial value of false.
5. Create a useEffect() hook where:

• The state variable is set to true at the beginning.
• An asynchronous task is simulated using setTimeout() or any other method.
• Once the task completes successfully, the state is set back to false.

7. Implement conditional rendering before rendering the <CldUploadWidget /> component. This can be a text message, a loader, or any other UI component.

Expected behaviour

I expect that when <CldUploadWidget /> is unmounted and then re-mounted, there will be only one iframe inside the DOM tree.

CodeSandbox or Live Example of Bug

Live CodeSandbox bug example

Don't forget to create .env.local with speicified variables:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=<YOUR_CLOUDINARY_CLOUD_NAME>
NEXT_PUBLIC_CLOUDINARY_API_KEY=<YOUR_CLOUDINARY_API_KEY>
CLOUDINARY_API_SECRET=<YOUR_CLOUDINARY_API_SECRET>

Screenshot or Video Recording

Example of two iframes

Your environment

• OS: Arch Linux x86_64
• Node version: v22.13.1
• Npm version: 10.9.2
• Browser name and version: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Additional context

This behavior is quite non-obvious. I personally discovered this issue while writing E2E tests, as my test started failing due to the presence of two iframes instead of one.

It took me a significant amount of time to analyze and understand the root cause of this behavior.