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

Uppy
1

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(FileInput)
  .use(XHRUpload, {
    endpoint: 'http://my-website.org/upload',
  })
  .on('complete', result => {
    const url = result.successful[0].uploadURL;
    console.log(url);
  });

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

  return (
    <>
      <Header as="h4" content={title} />
      <Button onClick={() => setUppyOpen(true)}>Upload</Button>
      <DashboardModal
        uppy={uppy}
        open={uppyOpen}
        closeModalOnClickOutside
        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?

2

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.

3

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:

07
Screenshot 2019-05-01 at 14.42.07.png1090×756 170 KB

4

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

plugins={['FileInput, XHRUpload']}

which should be

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