Uppy displays error when navigating to the next tab

[tot98git]

Hi,
I'm using Uppy in a react project.
I have set up Uppy file uploader in a functional component like this:

export default ({
    handleUpload, onUpload, name, props, mode
}) => {
    const uppy = new Uppy({
        autoProceed: false,
        restrictions: {
            hideUploadButton: true,
            maxFileSize: 10000000, // uppy options
            maxNumberOfFiles: props.max,
            minNumberOfFiles: 1,
            allowedFileTypes: props.allowed,
        }
    }).on('file-added', (file) => {
        onUpload(file.data, name);
    }).on('upload', () => {
        if (mode === "instant") {
            handleUpload();
        }
        uppy.setState({ files: {} });
    });
    return (
        <Dashboard // uppy dashboard component
            uppy={uppy}
            plugins={[]}
            proudlyDisplayPoweredByUppy={false}
            hideUploadButton={mode !== "instant"}
            showProgressDetails
        />
    );
};

I call this component in a MUI stepper. It's mounted in the first page only as that's the only place we need it. But when navigating from the first page to the second I get this error:
.

I have found the fix to be to manually modify the module by navigating to node_modules/@uppy/react/lib/Dashboard.js and commenting out the following:

Dashboard.prototype.componentWillUnmount = function componentWillUnmount() {
   var uppy = this.props.uppy;

   // uppy.removePlugin(this.plugin);
 };

However manually modifying the module doesn't seem like a long term fix. Maybe the problem is in the way I mount the component. Nevertheless, I'm reporting this issue in case anyone else encounters it.
Thank you!

[arturi]

Hi! Could you try moving Uppy init code outside of your render method, while leaving what’s currently in return (...) in render?

Related to: #1198 (comment).

[tot98git]

Thank you so much! That worked. I'm closing this issue now.