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?