Unable to compile with Typescript 4.5.4

[GSuggitt]

I recently upgraded the version of typescript in a react project to version 4.5.4. When I did this I got an compile error reported in react-dropzone-uploader. I am using version 2.11.0 of react-dropzone-uploader In Typescript 4.4 the typing of the catch variable was changed to be "unknown" from "any". As a result the error was reported. The error I get is: node_modules/react-dropzone-uploader/dist/Dropzone.tsx:504:44 - error TS2571: Object is of type 'unknown'. The code in Dropzone.tsx is:

  uploadFile = async (fileWithMeta: IFileWithMeta) => {
    const { getUploadParams } = this.props
    if (!getUploadParams) return
    let params: IUploadParams | null = null
    try {
      params = await getUploadParams(fileWithMeta)
    } catch (e) {
      console.error('Error Upload Params', e.stack)
    }
    if (params === null) return
    const { url, method = 'POST', body, fields = {}, headers = {}, meta: extraMeta = {} } = params
    delete extraMeta.status

The problem is the catch variable "e" is now typed as "unknown" and so it is an error to attempt to access a member of "unknown"

Typescript has introduced an option "useUnknownInCatchVariables" which when set to "false" will allow the code to compile and that is how I am getting around the problem.

A suggestion has been made to me that I need to wrap my call to react-dropzone-uploader in a try-catch to solve my problem. That will not solve my issue. My issue is I cannot compile my project. The person making the suggestion seemed to believe that the try-catch in question was in my code and that I should fix my code.

The problem lies in the Dropzone.tsx file of react-dropzone_uploader. And the fix is very easy:

    try {
      params = await getUploadParams(fileWithMeta)
    } catch (e) {
      console.error('Error Upload Params', (e as any).stack)
    }

[beinghaziq]

Hi, @GSuggitt have you resolved this issue on your end?? I'm getting the same issue and I haven't reached any solution yet other than setting useUnknownInCatchVariables as false in tsconfig file.

[GSuggitt]

I have had to set "useUnknownInCatchVariables" to "false".

For some unknown reason, the authors are adding the tsx files to the distribution (which is not at all necessary). And, of course, Typescript chases down all the "imports", crashes into their offending TSX file and stops.

---

From: Muhammad Haziq @.> Sent: Tuesday, January 25, 2022 3:02 AM To: fortana-co/react-dropzone-uploader @.> Cc: Gerry Suggitt @.>; Mention @.> Subject: Re: [fortana-co/react-dropzone-uploader] Unable to compile with Typescript 4.5.4 (Issue #179)

Hi, @GSuggitthttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_GSuggitt&d=DwMCaQ&c=euGZstcaTDllvimEN8b7jXrwqOf-v5A_CdpgnVfiiMM&r=78qlPfTEsFT74NuHbvqf78TUZ56uV693-8p2ueiPANY&m=UAacYejPdGBZ_PdTvW1v_egC8Ne7sSe_mwII-Z2adNw&s=yfMdTGnzq4nhWB_zQ-sKtp9l1nOuJ7ZCJVsL63OD67E&e= have you resolved this issue on your end?? I'm getting the same issue and I haven't reached any solution yet other than setting useUnknownInCatchVariables as false in tsconfig file.

— Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_fortana-2Dco_react-2Ddropzone-2Duploader_issues_179-23issuecomment-2D1020906574&d=DwMCaQ&c=euGZstcaTDllvimEN8b7jXrwqOf-v5A_CdpgnVfiiMM&r=78qlPfTEsFT74NuHbvqf78TUZ56uV693-8p2ueiPANY&m=UAacYejPdGBZ_PdTvW1v_egC8Ne7sSe_mwII-Z2adNw&s=QFoZWZds8YftgU5HSw7Y7fz_UBWg9x2WqxuGlSwiFAw&e=, or unsubscribehttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AB4O6UGWFVGVIWFHOBUXL73UXZKJHANCNFSM5L4FACCA&d=DwMCaQ&c=euGZstcaTDllvimEN8b7jXrwqOf-v5A_CdpgnVfiiMM&r=78qlPfTEsFT74NuHbvqf78TUZ56uV693-8p2ueiPANY&m=UAacYejPdGBZ_PdTvW1v_egC8Ne7sSe_mwII-Z2adNw&s=L806UzbEFnkF36Yi4Q3m6kOGCFdFTtZbgqZB_JMLStw&e=. Triage notifications on the go with GitHub Mobile for iOShttps://urldefense.proofpoint.com/v2/url?u=https-3A__apps.apple.com_app_apple-2Dstore_id1477376905-3Fct-3Dnotification-2Demail-26mt-3D8-26pt-3D524675&d=DwMCaQ&c=euGZstcaTDllvimEN8b7jXrwqOf-v5A_CdpgnVfiiMM&r=78qlPfTEsFT74NuHbvqf78TUZ56uV693-8p2ueiPANY&m=UAacYejPdGBZ_PdTvW1v_egC8Ne7sSe_mwII-Z2adNw&s=GYUNBI7sfUJsG_poki7keWI1RnpM5f8Ywu23y_NlBAY&e= or Androidhttps://urldefense.proofpoint.com/v2/url?u=https-3A__play.google.com_store_apps_details-3Fid-3Dcom.github.android-26referrer-3Dutm-5Fcampaign-253Dnotification-2Demail-2526utm-5Fmedium-253Demail-2526utm-5Fsource-253Dgithub&d=DwMCaQ&c=euGZstcaTDllvimEN8b7jXrwqOf-v5A_CdpgnVfiiMM&r=78qlPfTEsFT74NuHbvqf78TUZ56uV693-8p2ueiPANY&m=UAacYejPdGBZ_PdTvW1v_egC8Ne7sSe_mwII-Z2adNw&s=VSVw7VFLq5gAT2-5AXYgp1DkRX4_VH892Ikn7YJNqf8&e=. You are receiving this because you were mentioned.Message ID: @.***>

[BHunter2889]

Is there an update on this? Is this project still even active? This seems like such a simple fix that for such a widely used project it should've been fixed by now... no offense intended, but would like to see an update of any kind.

[prmichaelsen]

Note that setting useUnknownInCatchVariables to false isn't the real fix. Like @GSuggitt said, the problem is tsx files are published to dist. I wouldn't modify your tsconfig to get around this, since you likely want those errors. For now, I just delete the tsx files manually.

https://github.com/fortana-co/react-dropzone-uploader/issues/108#issuecomment-1083621257