[DragDrop React]: Expected a plugin class, but got object

Uppy
1

Hello everyone,

I am moving a SingleFileUploader component from an app to another one. Both apps are React 18, using typescript 5.4.5, and the settings for babel and webpack are the same. However, in the app I am copying the component from, this one is working just fine but in the receiving app I am getting the following error:

Expected a plugin class, but got object. Please verify that the plugin was imported and spelled correctly.
TypeError: Expected a plugin class, but got object. Please verify that the plugin was imported and spelled correctly.
    at Uppy.use (webpack-internal:///./node_modules/@uppy/core/lib/Uppy.js:996:13)
    at DragDrop.installPlugin (webpack-internal:///./node_modules/@uppy/react/lib/DragDrop.js:61:10)
    at DragDrop.componentDidMount (webpack-internal:///./node_modules/@uppy/react/lib/DragDrop.js:20:10)
    at commitLayoutEffectOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23339:30)
    at commitLayoutMountEffects_complete (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24722:9)
    at commitLayoutEffects_begin (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24708:7)
    at commitLayoutEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24646:3)
    at commitRootImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26857:5)
    at commitRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26716:5)
    at finishConcurrentRender (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26015:9)
ERROR
Cannot read properties of undefined (reading 'id')
TypeError: Cannot read properties of undefined (reading 'id')
    at Uppy.removePlugin (webpack-internal:///./node_modules/@uppy/core/lib/Uppy.js:1060:42)
    at DragDrop.uninstallPlugin (webpack-internal:///./node_modules/@uppy/react/lib/DragDrop.js:71:10)
    at DragDrop.componentWillUnmount (webpack-internal:///./node_modules/@uppy/react/lib/DragDrop.js:40:10)
    at callComponentWillUnmountWithTimer (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22886:16)
    at safelyCallComponentWillUnmount (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22907:5)
    at commitDeletionEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24163:13)
    at recursivelyTraverseDeletionEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24023:5)
    at commitDeletionEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24052:11)
    at recursivelyTraverseDeletionEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24023:5)
    at commitDeletionEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24052:11)

The way I am using the dragdrop component is this:

import React, { JSX, useState } from 'react';
import { createUppyInstance } from './uppy/uppyUtils';
import '@uppy/core/dist/style.css';
import '@uppy/drag-drop/dist/style.css';
import { DragDrop } from '@uppy/react';

export const MyComponent = () => {
       const [uppy] = useState(createUppyInstance(fileRestrictions, uploadFunction, setFileName, onSuccess, onError));

      return (
           <>
                 <div id={'drag-and-drop'}>
                    <DragDrop
                        inputName={'file-input'}
                        note={`Maximum file size of ${fileRestrictions.maxFileSize}MB`}
                        allowMultipleFiles={false}
                        uppy={uppy}
                        locale={{
                            strings: {
                                dropHereOr: `Drag and drop the ${fileRestrictions.allowedFileTypes.toString()} file here or %{browse}`,
                                browse: 'browse',
                            },
                        }}
                    />
                </div>
           </>
      )
}

(please, note this is just an example with the core stuff related to Uppy in my component)

If I change the DragDrop component with the plugin, like this:

import React, { JSX, useState } from 'react';
import { createUppyInstance } from './uppy/uppyUtils';
import '@uppy/core/dist/style.css';
import '@uppy/drag-drop/dist/style.css';
import DragDrop from '@uppy/drag-drop';

export const MyComponent = () => {
       const [uppy] = useState(createUppyInstance(fileRestrictions, uploadFunction, setFileName, onSuccess, onError));

useEffect(() => {
        uppy.use(DragDrop, {
            target: '#drag-and-drop',
            note: `Maximum file size of ${fileRestrictions.maxFileSize}MB`,
            locale: {
                strings: {
                    dropHereOr: `Drag and drop the ${fileRestrictions.allowedFileTypes.toString()} file here or %{browse}`,
                    browse: 'browse',
                },
            },
        });
    }, [fileRestrictions.allowedFileTypes, fileRestrictions.maxFileSize, puppy]);

      return (
           <>
                 <div id={'drag-and-drop'}></div>
           </>
      )
}

Then, the dragdrops works. However, this is not what we want, as I am having other issues when the component rerenders.

Any ideas what might be going on here?

Thanks in advance,
Juan