Can't get uppy working with React, will cry soon

I just can’t see where I’m going wrong and I’m tearing my hear out. I know it’s most likely something stupidly simple. Anyway…

Here’s my component:

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Header, Button } from 'semantic-ui-react';

import Uppy from '@uppy/core';
import { DashboardModal } from '@uppy/react';
import XHRUpload from '@uppy/xhr-upload';
import FileInput from '@uppy/file-input';

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

const uppy = Uppy({
  id: 'Avatar',
  .use(XHRUpload, {
    endpoint: '',
  .on('complete', result => {
    const url = result.successful[0].uploadURL;

const Avatar = ({ title }) => {
  const [uppyOpen, setUppyOpen] = useState(false);

  return (
      <Header as="h4" content={title} />
      <Button onClick={() => setUppyOpen(true)}>Upload</Button>
        onRequestClose={() => setUppyOpen(false)}
        plugins={['FileInput, XHRUpload']}

Avatar.propTypes = {
  title: PropTypes.string.isRequired,
  avatar: PropTypes.string,
  formUpdate: PropTypes.func.isRequired,

export default Avatar;

But I’m getting these errors in the console:

Coming from preact:

preact.mjs:132 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag 
name provided ('[object Module]') is not a valid name.

and coming from Uppy.prototype.removePlugin:

Uncaught TypeError: Cannot read property 'id' of undefined

Any ideas where I’m going wrong?

One possible cause might be that preact is getting loaded as an ES module while Uppy expects a CommonJS module. If you’re using Webpack, could you try adding this to your configuration?

module.exports = {
  resolve: {
    alias: { preact: require.resolve('preact') }

If that fixes the problem, we can do something in Uppy to make it work again by default.

Thanks for the reply goto-bus-stop!

Still the same error unfortunately though.

I have installed Preact as a dependency and now the error is different but still the same crash:

I’m sure you solved this already, but it looks like the problem is

plugins={['FileInput, XHRUpload']}

which should be

plugins={['FileInput', 'XHRUpload']}