visgl / visgl/react-google-maps
[Bug] Warning: useLayoutEffect does nothing on the server
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.9k
- Forks
- 193
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 13
Description
Description
After installing the react-google-maps package we started getting the following error:
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.
2024-05-24T18:49:02.004220106Z at Map (file:///app/node_modules/@vis.gl/react-google-maps/dist/index.modern.mjs:805:5)
In our own project we used something like this to prevent this warning issue.
const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect
This means that it will use useLayoutEffect normally, but during Server Side Rendering it will use useEffect
Steps to Reproduce
Use react-google-maps inside of a NextJS project.
Environment
- Library version: 0.11.0
- Google maps version: weekly
- Browser and Version: Chrome
- OS: Alpine Linux
Logs
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.
2024-05-24T18:49:02.004220106Z at Map (file:///app/node_modules/@vis.gl/react-google-maps/dist/index.modern.mjs:805:5)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start from the Map entry point identified in the SSR stack trace at dist/index.modern.mjs:805 and reproduce the warning in a NextJS server-rendered app. Trace that entry point back to the package source; done means server rendering no longer emits the useLayoutEffect warning while client behavior remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100