document challenges creating a custom UIPlugin inside a React app

[yellowtailfan]

Initial checklist

• [X] I understand this is a feature request and questions should be posted in the Community Forum
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Problem

I spent a few hours trying to create a custom UIPlugin inside our Nextjs React app. I wasn't able to get it working, and I believe the issue is because the Nextjs compiler assumes React, but Uppy UIPlugins must use Preact. Specifically, the React and Preact compilers produce incompatible outputs from JSX. See #3146 for details.

Solution

I recommend explaining in the UIPlugin docs that it is difficult to create a custom UIPlugin inside a Nextjs and/or React app unless you are willing to convert your entire app to Preact. This would save time for developers using Uppy who are considering creating a plugin.

Alternatives

If there is a an easy solution that I missed, that would be great to know about.

I understand that it's possible to resolve this by changing our app from React to Preact, and that this can be done inside Nextjs. However, I don't want to change our entire app framework just for a small UI component. Also, there are some compatibility issues in Preact with the latest versions of Nextjs and React.

I also read #3146 and these docs and attempted to implement the various suggestions as fixes, but they didn't work out of the box:

• https://preactjs.com/guide/v10/getting-started#no-build-tools-route
• https://github.com/developit/htm

I imagine it would be possible to set up a special build system using Preact alongside our app just for the custom UIPlugin, however I'd rather not add that complexity for a small component.

Instead I am planning to add custom UI around the outside of the Uppy Dashboard so that I can stick to the same React conventions that we use throughout our app.

Overall, we're very happy with Uppy and we plan to continue using it as our primary uploader. Thank you for contributing to open source software!