Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

239
Views
Can't read 'id' when Uppy component is rendered

I created this component :

// Data is an `useRef`
const SelectImage = ({ data }) => {
    const uppy = new Uppy({
        id: 'uppy',
        autoProceed: true,
        restrictions: {
            maxFileSize: 10485760,
            maxTotalFileSize: 104857600,
            maxNumberOfFiles: 1000,
            allowedFileTypes: ['.jpg', '.jpeg', '.png']
        }
    })
        .use(DropTarget, { id: 'DropTarget', target: document.body })
        .use(Compressor, { id: 'Compressor' })

    uppy.on('complete', files => {
        data.current = { files }
    })

    return (
        <Dashboard
            uppy={uppy}
            disableStatusBar={true}
            proudlyDisplayPoweredByUppy={false}
            theme='light'
        />
    )
}

With React Scripts 5.0.1, React 18.2.0 and Uppy Core 2.3.1, Uppy React 2.2.2, Uppy Compressor 0.3.0 and Uppy Drop Target 1.1.3.

When the component above is rendered, the following error is thrown:

Dashboard.js:1121 Uncaught TypeError: (0 , _nonSecure.nanoid) is not a function
    at new Dashboard (Dashboard.js:1121:1)
    at Uppy.use (Uppy.js:1012:1)
    at Dashboard.installPlugin (Dashboard.js:49:1)
    at Dashboard.componentDidMount (Dashboard.js:19:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:23305:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:24688:1)
    at commitLayoutEffects_begin (react-dom.development.js:24674:1)
    at commitLayoutEffects_begin (react-dom.development.js:24656:1)
    at commitLayoutEffects (react-dom.development.js:24612:1)
    at commitRootImpl (react-dom.development.js:26823:1)

Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at Uppy.removePlugin (Uppy.js:1081:1)
    at Dashboard.uninstallPlugin (Dashboard.js:61:1)
    at Dashboard.componentWillUnmount (Dashboard.js:36:1)
    at callComponentWillUnmountWithTimer (react-dom.development.js:22852:1)
    at safelyCallComponentWillUnmount (react-dom.development.js:22873:1)
    at invokeLayoutEffectUnmountInDEV (react-dom.development.js:25188:1)
    at invokeEffectsInDev (react-dom.development.js:27351:1)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27321:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27056:1)
    at flushPassiveEffects (react-dom.development.js:26984:1)

I tried to rollback Uppy, uninstall all the plugins, change the ids values and encapsulate the Uppy instance as it is shown in the documentation example, but nothing worked. Any tips?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!