EvHaus / react-pdf-charts

Allows SVG-based React charts to be rendered in react-pdf
MIT License
53 stars 3 forks source link

UseLayoutEffect Warning #31

Open fmssn opened 1 year ago

fmssn commented 1 year ago

When using the package, I get the warning:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

I assume this is because interactivity is obviously not given when rendering to a PDF. This does not break anything, yet it makes debugging and logging a bit inconvenient. Have you dealt with this issue before? Is there a way to suppress this warning without suppressing other warnings?

EvHaus commented 1 year ago

Yeah... it's super annoying and I have no idea how to fix it cleanly. My workaround for this has been:

// Silence `useLayoutEffect does nothing on the server` warnings. These come
// from `recharts` but they're harmless and just clutter the console output.
const consoleError = console.error;
console.error = function (message) {
    if (message?.startsWith('Warning: useLayoutEffect does nothing on the server')) return;
    consoleError.apply(console, arguments);
};
fmssn commented 1 year ago

Thank you for the fast response! This works for now. I looked into it, but I don't know how to fix it either without delving deeply into e.g. Recharts components and modifying them.