Skip to content
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

SSR: useLayoutEffect causes verbose logs #85

Open
paul-vd opened this issue Nov 13, 2024 · 1 comment
Open

SSR: useLayoutEffect causes verbose logs #85

paul-vd opened this issue Nov 13, 2024 · 1 comment

Comments

@paul-vd
Copy link

paul-vd commented Nov 13, 2024

My Environment

Dependency Version
Node.JS version v20.12.2
react-color-palette version v7.3.0

Expected Behavior:

When using in a SSR app (Remix || Next.js) it should not log verbose warning

Actual Behavior:

It currently logs that using useLayoutEffect has no effect on the server

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.
    at file:///workspaces/my-app/node_modules/.pnpm/[email protected][email protected]/node_modules/react-color-palette/dist/rcp.mjs:6:2988
    at div
    at file:///workspaces/my-app/node_modules/.pnpm/[email protected][email protected]/node_modules/react-color-palette/dist/rcp.mjs:6:3680
    at div
    at eval (/workspaces/my-app/app/components/ui/card.tsx:47:3)
    at div
    at eval (/workspaces/my-app/app/components/ui/card.tsx:11:3)
    at Fieldset (/workspaces/my-app/app/features/settings/kiosk/branding/BrandingPage.tsx:44:3)
    at div
    at div
    at PanelWithForwardedRef (/workspaces/my-app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-resizable-panels/dist/react-resizable-panels.development.node.cjs.js:66:3)
    at forwardRef(Panel)
    at div

Additional Context:

Since the code is minified, it's hard to do a patch-package to fix this, it would additionally be nice if you rather let the bundlers of each app handle the minification, since you already serve esm, bundlers like vite and turbo should handle this. I suggest removing the minfy option

@Wondermarin
Copy link
Owner

I agree that minification needs to be disabled, and I'll do that in the next release. As for the issue at hand, the library is intended for client-side use only, and that's what the warning indicates. I'm not sure how much of a problem this really is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants