Uppy Dashboad Component and its other React components are not working

[andrew-oko-odion]

import React, { Component } from "react";
import Dashboard from "@uppy/react/lib/Dashboard";
import Uppy from "@uppy/core";
import Tus from "@uppy/tus";

export default props => {
  const uppy = Uppy({
    meta: { type: "avatar" },
    autoProceed: true
  });
  uppy.use(Tus, { endpoint: "https://master.tus.io/files/" });
  uppy.run();

  return <Dashboard uppy={uppy} />;
};

"

react": "^16.2.0",
The project was bootstraped with create-react-app  

[iMerica]

I'm seeing the same thing too

[goto-bus-stop]

Thanks for the report! It looks like the same problem as #991. I haven't been able to reproduce it earlier but I'll give it another attempt. I'll close this in favour of #991.

---

As an aside:

export default props => {
  const uppy = Uppy({
    meta: { type: "avatar" },
    autoProceed: true
  });
  uppy.use(Tus, { endpoint: "https://master.tus.io/files/" });
  uppy.run();

  return <Dashboard uppy={uppy} />;
};

Initializing Uppy in the render() function doesn't work, because it'll use a new instance every time the component rerenders, and forget about all its state. You need to initialize the Uppy instance outside your component or use a class component and initialize it inside the constructor().

export default class extends Component {
  constructor(props) {
    super(props);
    const uppy = Uppy({
      meta: { type: "avatar" },
      autoProceed: true
    });
    uppy.use(Tus, { endpoint: "https://master.tus.io/files/" });

    this.state = { uppy };
  }

  render() {
    return <Dashboard uppy={this.state.uppy} />;
  }
}

It's a common mistake so we should call it out more explicitly in our React docs…

Also, uppy.run() is no longer necessary :)

[iki]

@andrew-oko-odion I had the same issue on ejected create-react-app with @uppy/react 2.9.0. Tried also 2.6.0, 2.7.3, 2.8.0 without success. Experiments with uppy modules did narrow the issue down to .mjs import.

The solution was to edit webpack config and apply CRA fix facebook/create-react-app#5258 to re-enable .mjs support.

Kudos to @arqex for for pointing me in the right direction in his post on .mjs:
https://medium.com/passpill-project/files-with-mjs-extension-for-javascript-modules-ced195d7c84a