ImageUploader - duplicates itself in DOM when using Uppy/react Dashboard

[jsrhodes15]

Initial checklist

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

Link to runnable example

n/a

Steps to reproduce

import Uppy from "@uppy/core";
import ImageEditor from "@uppy/image-editor";
import { Dashboard } from "@uppy/react";

export default function Uploader() {
  const [uppy, setUppy] = useState<Uppy | null>(null);

  useEffect(() => {
    // @ts-ignore
    const uppy = new Uppy({
      debug: true,
    })
      .use(ImageEditor)

    setUppy(uppy);

    return () => {
      uppy.close({ reason: "unmount" });
      setUppy(null);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    uppy && (
      <Dashboard
        uppy={uppy}
        plugins={["ImageEditor"]}
      />
    )
  );
}

Expected behavior

Image editor should register itself and mount to the Dashboard (this was working as late as 2.3.0)

Actual behavior

ImageEditor initially defaults the target to body and as a result, creates a new div.

https://github.com/transloadit/uppy/blob/main/packages/%40uppy/core/src/UIPlugin.ts#L93

Additionally, it seems after the Dashboard component mounts, ImageEditor is able to target the Dashboard. So you get 2 instances of the editor, one inside the dashboard, and another at the bottom of the screen.

I tried passing in Dashboard from @uppy/dashboard like the example shows, but then I get an error that the target is not a Plugin.

It's very possible that I am doing something wrong, but the fact that 2.3.0 works just fine leads me to believe this may be a regression.

Side note - happy to help with this, just not sure where to start.

[Murderlon]

Hi, please upgrade to the latest versions again. I think this is the same issue as reported in #4931 and #4932. It's already fixed and released.

[jsrhodes15]

I tried updating everything to latest, and the problem came back. Here is a screen shot of the DOM

I tried debugging and it appears image-editor is registering 2X. The first time, it doesn't see the Dashboard, so it defaults the target to body, which results in the creation of a div. The second time I see it register, it does appear to have the target set to the instance of the Dashboard.

[zachwinnie]

FWIW adding an empty target works as a workaround for me with @uppy/image-editor 2.4.3.

.use(ImageEditor, { target: '' })

BEFORE

AFTER

[jsrhodes15]

Apologies for being lazy initially, here is a repro: https://github.com/jsrhodes15/uppy-bug

[jsrhodes15]

@zachwinnie This worked for me as well! Thank you 🙏🏼