cloudinary-community / cloudinary-community/next-cloudinary
[Bug] Duplicate iframes created when <CldUploadWidget /> re-renders
- 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
Assessment
This issue has not been assessed yet.