"ID" not found and "nanoid" is not a function when Uppy Dashboard is rendered

[ghost]

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 and encapsulate the Uppy instance as it is shown in the documentation example, but nothing worked. Any tips?

[Murderlon]

Hi, this has already been reported and answered in #3376, #3537, and #3687. This is an issue on the CRA side and there isn't much we can do about it. However, we are planning to release Uppy 3.0 soon which transitions to ESM. This may fix it. You can try to use our beta version to test that (npm i @uppy/core@next @uppy/react@next @uppy/compressor@next @uppy/drop-target@next).