Basic React Dashboard blank (opacity: 0) on version upgrade with Next.js

[jeremyis]

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

Steps to reproduce

I had actually upgraded from @uppy/core 2.3.0 -> 3.0.4 so perhaps something in my upgrade has gone wrong. I tried reinstalling fresh and going through the docs and multiple variations thereof. No success.

I had also recently upgraded from React 17 to 18 and Next.js from 12.1 -> 12.3. I am not usre if this had any impact.
I have been using react bootstrap (don't ask).

npm diff:

Code:

import AwsS3Multipart from "@uppy/aws-s3-multipart";
import React, { useId } from "react";
import Uppy from "@uppy/core";
import { useUppy, Dashboard } from "@uppy/react";
import "@uppy/core/dist/style.css";
import "@uppy/dashboard/dist/style.css";
import FileInput from "@uppy/file-input";

interface Props {
  onUploadSuccess: (localFilePath: string, url: string) => void;
  serverBaseUrls: ServerBaseUrls;
  allowedFileTypes?: MimeType[];
}
const companionUrl= ""; // Is set in actual code.
export function FileUploadComponent(props: Props) {
  const uppyId = useId();
  const uppy = useUppy(() => {
    let restrictions = {
      maxFileSize: 300 * 1024 * 1024,
      ...(props.allowedFileTypes ? { allowedFileTypes: props.allowedFileTypes } : {}),
    };
    return new Uppy({
      id: `uppy-${uppyId}`,
      debug: true,
      autoProceed: false,
      allowMultipleUploadBatches: true,
      restrictions,
    })
      .use(FileInput)
      .use(AwsS3Multipart, {
        limit: 4,
        retryDelays: [0, 1000, 3000, 5000, 10000],
        companionUrl,
      })
      .on("upload-success", (uppyFile, response) => {
        if (!response.uploadURL) {
          throw new Error(
            `No upload URL for file upload. Response: ${JSON.stringify(response)}`
          );
        }
        //console.log(["uppy-upload-success", uppyFile, uppyFile?.meta?.name, response.uploadURL]);
        const localFilePath = (uppyFile?.meta?.relativePath as string) || uppyFile?.meta?.name;
        if (!localFilePath) {
          throw new Error("No localFilePath found on Uppy upload");
        }
        props.onUploadSuccess(localFilePath, response.uploadURL);
      });
  });

  return (
    <Dashboard
      uppy={uppy}
      disabled={false}
      plugins={["DragDrop", "FileInput"]}
      fileManagerSelectionType={"both"}
      showProgressDetails={true}
    />
  );
}

note: I get the same behavior with / without the .use(FileInput)

Expected behavior

note: .uppy-Dashboard-innerWrap has opacity: 0. When I manually override that, I get:

I found a somewhat related issue: #1571

Actual behavior

<Dashboard> renders as:

Basic React Dashboard rendering Blank window. When I override the CSS, file upload no-ops. I'll get a "file selector" but selecting files doesn't update the UI. (my suspicion is startListeningToResize (and likely its parents) is never
called. See: #1383

[jeremyis]

I think this workaround works but is very hacky.

Same code as above ,except the return statement is substittued for this code block

  // HACK to prevent
    useEffect(() => {
      const hasDashboardPlugin = uppy.getState().plugins?.["react:Dashboard"];
      const dashboardIsHidden = uppy.getState().plugins?.["react:Dashboard"]?.isHidden;
      if (hasDashboardPlugin && dashboardIsHidden) {
        const newState = {
          ...uppy.getState(),
          plugins: {
            ...(uppy.getState().plugins ?? {}),
            "react:Dashboard": {
              ...(uppy.getState().plugins?.["react:Dashboard"] ?? {}),
              isHidden: false,
            },
          },
        };
        uppy.setState(newState);
        setShowDashboard(true); // To trigger a re-render; only  uppy.setState(newState); doesn't seem to trigger a re-render
      }
    }, [uppy.getState()]);

    return (
      <div>
        <Dashboard
          uppy={uppy}
          disabled={!showDashboard}
          fileManagerSelectionType={"both"}
          showProgressDetails={true}
          proudlyDisplayPoweredByUppy={false}
        />
      </div>
    );

[jeremyisatrecharm]

So it looks like the issue only happens locally with Next (I am running vercel dev). I think prod worked just fine (actually with the disabled prop set to true, I was getting a grayed-out UI that still functioned).

This is very hacky but I just did this and it works both locally and in prod:

    useEffect(() => {
      setTimeout(() => {
        setShowDashboard(true);
      }, 500);
    }, []);

    return (
      <div>
        {showDashboard ? (
          <Dashboard
            uppy={uppy}
            fileManagerSelectionType={"both"}
            showProgressDetails={true}
            height={300}
            width={400}
            proudlyDisplayPoweredByUppy={false}
          />
        ) : (
          <Spinner variant="secondary" animation="border" />
        )}
      </div>
    );```

[Murderlon]

Interesting, as of React 18, I think the development renders twice to catch inconsistencies. So this might be related to #3935

[aspian-io]

Some other packages like react-player not working as expected with reactStrictMode: true in NextJS 13.0.2 and React 18.2.0 development envioronment. So, I changed reactStrictMode value to false in next.config.js and after that, uppy/react 3.0.2 and other incompatible packages work fine.

I just wanted to mention that when you're using uppy-react like this, there are some other issues like upload-success event being called multiple times after uploading recorded audio from uppy audio component usually after recording and uploading for the second time.