cloudinary-community / cloudinary-community/next-cloudinary

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

Open
#587 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
300
Forks
137
Avg merge
3m
Merged PRs (30d)
2

Description

# Bug Report

## Describe the bug

The bug occurs when using conditional rendering: `` 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 `` 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 `` component. This can be a text message, a loader, or any other UI component.

## Expected behaviour

I expect that when `` 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](https://codesandbox.io/p/devbox/cld-upload-widget-duplicating-iframe-9cx7td)

Don't forget to create .env.local with speicified variables:
```
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
NEXT_PUBLIC_CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
```

## Screenshot or Video Recording

[Example of two iframes](https://github.com/user-attachments/assets/31c5e780-8aa5-4994-b0c8-f5406204425b)

## 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.