Element cannot be used as JSX component (react and uppy)

Question

I got an error when use uppy/react in Dashboard component:

import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import '@uppy/core/dist/style.css';
import '@uppy/dashboard/dist/style.css';

export const UppyX = () => {
  new Uppy({
    autoProceed: false,
    allowMultipleUploads: false,
    restrictions: {
      minNumberOfFiles: null,
      allowedFileTypes: [
        ".xlsx",
      ]
    }
  }).on("complete", () => console.log("YAH"));

  return (
    <div>
      <Dashboard
        uppy={Uppy}
        proudlyDisplayPoweredByUppy={false}
        showProgressDetails={true}
      />
    </div>
  );
}

I use uppy/react library to implement file uploader, but recieved error, which couldn't find in documentation. Whole text of error: 'Dashboard' cannot be used as a JSX component. Its instance type 'Dashboard' is not a valid JSX element. Type 'Dashboard' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.ts(2786)

Also I had an error: JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

both are bring from typescript

Answer 1

You can't use uppy Dashboard as ReactElement

use

new Uppy().use(Dashboard, { inline: true, target: '#uppy-dashboard' });

to render dashboard in div with id uppy-dashboard

see this docs for more info

Update

To use it in react the way you trying earlier

refer this

import React, { useEffect } from 'react'
import Uppy from '@uppy/core'
import Webcam from '@uppy/webcam'
import { Dashboard } from '@uppy/react'

const uppy = new Uppy().use(Webcam)

function Component () {
  return <Dashboard uppy={uppy} plugins={['Webcam']} />
}