Basic documented React examples are very problematic to run

I tried to work with Uppy and React, to no avail.

I started from the examples, assuming that the react examples might be working ones. I wasn’t able to make them work.

Let me clarify that I am not a React expert, absolutely, so I hope what I am reporting is nothing but a false positive. However at first I tried to load uppy on a complex theme I am using, but then I tried a blank create-react-app and found more or less the same problems.

First, you will find attached a basic react example with a “FileUploader” I intend to use as a component. Obviously it is very basic and based on the example from the official docs. In addition to the basic modules, I executed:

yarn add @uppy/core
yarn add @uppy/react
yarn add @uppy/tus

I tried many other ways to make this working. Just want to highlight the fact that I am opening an issue after 4-5 hours trying to understand

1. documentation
2. why documentation says some things that I found difficult to understand

For example:

why using this block of code from the docs

import DragDrop from '@uppy/react/lib/DragDrop';
import { DragDrop } from '@uppy/react';

I get a “duplicate” import error when I try to do this?

Most of other errors were related to something that goes wrong during the import phase.

One of the import/constructor setup of the “theme” integration was this:

import '@uppy/core/dist/style.css'
import '@uppy/drag-drop/dist/style.css'
const React = require('react')
const { Dashboard, DashboardModal, DragDrop, ProgressBar } = require('@uppy/react')
const Tus = require('@uppy/tus')


const Uppy = require('@uppy/core')



export default class DragAndDropFileUploader extends React.Component {

  constructor (props) {
    super(props)

    this.state = {
      showInlineDashboard: false,
      open: false
    }

    this.uppy = Uppy({ id: 'uppy1', autoProceed: true, debug: true })
    .use(DragDrop, { })
      //.use(GoogleDrive, { companionUrl: 'https://companion.uppy.io' })


   this.handleModalClick = this.handleModalClick.bind(this)
  }

  componentWillUnmount () {
    this.uppy.close()
  }

  handleModalClick () {
    this.setState({
      open: !this.state.open
    })
  }

  render () {
    const { showInlineDashboard } = this.state

    return (

        <div>
        <h1>React Examples</h1>

        <h2>Inline Dashboard</h2>
        <label>
          <input
            type="checkbox"
            checked={showInlineDashboard}
            onChange={(event) => {
              this.setState({
                showInlineDashboard: event.target.checked
              })
            }}
          />
          Show Dashboard
        </label>
        {showInlineDashboard && (
          <Dashboard
            uppy={this.uppy}
            plugins={['GoogleDrive']}
            metaFields={[
              { id: 'name', name: 'Name', placeholder: 'File name' }
            ]}
          />
        )}

        <h2>Modal Dashboard</h2>
        <div>
          <button onClick={this.handleModalClick}>
            {this.state.open ? 'Close dashboard' : 'Open dashboard'}
          </button>
          <DashboardModal
            uppy={this.uppy2}
            open={this.state.open}
            target={document.body}
            onRequestClose={() => this.setState({ open: false })}
          />
        </div>

        <h2>Drag Drop Area</h2>
        <DragDrop
          uppy={this.uppy}
          locale={{
            strings: {
              chooseFile: 'Boop a file',
              orDragDrop: 'or yoink it here'
            }
          }}
        />

        <h2>Progress Bar</h2>
        <ProgressBar
          uppy={this.uppy}
          hideAfterFinish={false}
        />
      </div>

    )
  }
}

which led to this different error: TypeError: Expected a plugin class, but got undefined. Please verify that the plugin was imported and spelled correctly. (for the benefit of google searches 🗡 )

Obviously there is something huge that I am missing, but the reason I am reporting this issue is that I would like to help perfectioning the documentation so that it would be more easy to understand for another user in the future.

the example attached brought me to the

Error: Your plugin must have an id error.

uppy-test.zip

I also tried to run the react-example from the repo, but the npm start command gave css import error. Tried building the entire repository with npm run build… I wasn’t able to load the examples.

Thank for every clarification! I hope my reporting is useful and not based on some misunderstanding I could have avoided.

[jazkh]

Hello @superandrew

There were few minor mistakes. I have edited your code with a working example. Also, you were initializing DashboardModal with this.uppy2 instead of this.uppy

I hope Uppy team will use this as an example in Uppy React docs.

import React, { Component } from 'react';
import Uppy from '@uppy/core'
import Tus from '@uppy/tus'
import Webcam from '@uppy/webcam'
import DashboardModal from '@uppy/react/lib/DashboardModal'
import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'

export default class DragAndDropFileUploader extends Component {
  constructor (props) {
    super(props)

    this.state = {
      open: false
    }
    this.handleModalClick = this.handleModalClick.bind(this);

    this.uppy = Uppy({ id: 'uppy1', autoProceed: true, debug: true })
    .use(Webcam)
    .use(Tus)
      //.use(GoogleDrive, { companionUrl: 'https://companion.uppy.io' })
  }

  componentWillUnmount () {
    this.uppy.close();
  }

  handleModalClick () {
    this.setState({
      open: !this.state.open
    });
  }

  render () {
    const { open } = this.state;

    return (
        <div>
        <h1>React Examples</h1>

       <h2>Modal Dashboard</h2>
        <div>
          <button id='dashboardmodal' onClick={this.handleModalClick}>
            {open ? 'Close dashboard' : 'Open dashboard'}
          </button>
          <DashboardModal
            uppy={this.uppy}
            open={open}
            target={document.body}
            onRequestClose={() => this.setState({ open: false })}
            plugins={['Webcam']}
            trigger='#dashboardmodal'
          />
        </div>
      </div>
    )
  }
}

[superandrew]

hello @jazkh, and thank for your help, which is very appreciated.

I tried to run it, however I am facing an error on CameraScreen.js on this line:

if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + _typeof(superClass));
  }

In this case superClass is undefined.

Out of curiosity, if I remove webcam from the example, I get the same error on ActionBrowserTagline.js, same line:

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + _typeof(superClass));
  }

superClass being undefined this time as well, so I suspect this could have something to do with my environment. Does this error ring a bell for you? It could be totally unrelated to Uppy, though.

Besides this, I don’t understand why

import DashboardModal from '@uppy/react/lib/DashboardModal' instead of const { Dashboard, DashboardModal, DragDrop, ProgressBar } = require('@uppy/react') works, and sometimes I notice that npm breaks yarn and viceversa, so it’s not entirely clean if - for uppy at least - adding via yarn or installing via npm is equivalent.