[Bug] Sentry reports error with `open` function in CldUploadWidget
Bug Report
Describe the bug
Sentry is reporting a:
TypeError Cannot read properties of undefined (reading 'open')
As a result of running the open render prop function with CldUploadWidget. I'll share more in a code example below
Is this a regression?
Not sure
Steps To Reproduce the error
- Add CldUploadWidget to a Next app
- Use the code below for the implementation
- Run the app, connected to Sentry
- See the issue pop up
Here is how I'm running the open function:
<CldUploadWidget uploadPreset={uploadWidgetPreset} onUpload={handleUpload} options={uploadWidgetParams}>
{({ open }) => {
function handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {
e.preventDefault();
open();
}
return (
<button onClick={handleOnClick}>Button</button>
)}}
</CldUploadWidget>
I'm calling this out because it's slightly different than the implementation in your docs:
<CldUploadWidget signatureEndpoint="<API Endpoint (ex: /api/sign-cloudinary-params)>">
{({ open }) => {
return (
<button onClick={() => open()}>
Upload an Image
</button>
);
}}
</CldUploadWidget>
Expected behaviour
Sentry doesn't notice an issue
CodeSandbox or Live Example of Bug
n/a
Screenshot or Video Recording
Attaching a screenshot of Sentry's trace, if it helps
Your environment
- OS: iOS 17.1.1 (client that triggered issue)
- Node version: v18.17.0
- Npm version: 9.6.7
- Browser name and version: Mobile Safari 17.1.1 (client that triggered issue)
Thank you!
Hello @andreidobrinski,
I hope you are doing well. I am interested in working on [Bug] Sentry reports error with open function in CldUploadWidget (#586). Could you kindly assign this issue to me? I will carefully investigate the cause and propose a fix while adhering to the project’s standards.
Thank you very much for your consideration. 🙏
Best regards, Aditya
Hy @eportis-cloudinary Could you please assign this to me? I would like to work on this.