-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Basic React Dashboard blank (opacity: 0) on version upgrade with Next.js #4209
Comments
I think this workaround works but is very hacky. Same code as above ,except the // 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>
); |
So it looks like the issue only happens locally with Next (I am running 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>
);``` |
Interesting, as of React 18, I think the development renders twice to catch inconsistencies. So this might be related to #3935 |
Some other packages like react-player not working as expected with I just wanted to mention that when you're using uppy-react like this, there are some other issues like |
Initial checklist
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:
note: I get the same behavior with / without the
.use(FileInput)
Expected behavior
note:
.uppy-Dashboard-innerWrap
hasopacity: 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 nevercalled. See: #1383
The text was updated successfully, but these errors were encountered: