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.

Sign up for GitHub

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

Jump to bottom

Getting useLayoutEffect errors in SSR in Remix with the Remix Shopify App Template #11862

Open
muchisx opened this issue Apr 9, 2024 · 5 comments · May be fixed by #11950
Open

Getting useLayoutEffect errors in SSR in Remix with the Remix Shopify App Template #11862

muchisx opened this issue Apr 9, 2024 · 5 comments · May be fixed by #11950
Assignees
@jesstelford
Labels
Bug Something is broken and not working as intended in the system. Engineering Priority: Medium Non-blocking regression, noticable inconcistency, or important feature

Comments

@muchisx
Copy link

muchisx commented Apr 9, 2024

polaris/polaris-react/src/components/IndexTable/IndexTable.tsx

Lines 7 to 8 in a89e614

// eslint-disable-next-line no-restricted-imports -- useIsomorphicLayoutEffect is not required for this specific usecase, because we're using useLayoutEffect only for dom manipulation. It has no purpose in server side rendered code.
useLayoutEffect,

I checked the line here 👆🏻, Maybe better to go back to use useIsomorphicLayoutEffect being required everywhere ?

image
@oliversd
Copy link

oliversd commented Apr 9, 2024

Same problem here updated to last version using IndexTable with Remix.

"@shopify/polaris": "^13.0.0",

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.
09:50:55 │ remix │ at IndexTableBase

@kyledurand
Copy link
Contributor

cc @jesstelford it looks like it might have been you that changed from useIsomorphicLayoutEffect to useLayoutEffect here. Do you have a bit of time to investigate?

@saifulapm
Copy link

Any update on this ?

@jesstelford jesstelford self-assigned this Apr 16, 2024
@jesstelford jesstelford added Bug Something is broken and not working as intended in the system. Engineering Priority: Medium Non-blocking regression, noticable inconcistency, or important feature labels Apr 16, 2024
@jesstelford
Copy link
Contributor

jesstelford commented Apr 26, 2024 •
edited

Thanks for the report folks, the error messages & prior investigation made it much easier to track down!

@jesstelford jesstelford linked a pull request Apr 26, 2024 that will close this issue
Open
@jesstelford
Copy link
Contributor

I've got a fix open in #11950 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jesstelford jesstelford

Labels
Bug Something is broken and not working as intended in the system. Engineering Priority: Medium Non-blocking regression, noticable inconcistency, or important feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[IndexTable] Remove useLayoutEffect warning in SSR for IndexTable Shopify/polaris
5 participants
@jesstelford @oliversd @saifulapm @kyledurand @muchisx