Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format.

[gameveloster]

When using react-highlight-menu 2.0.2 with a Next.js 13.4.9 app, I am getting this 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.
    at Lo (/testing/my_nextjs_app/node_modules/react-highlight-menu/dist/index.cjs.js:30:23196)
    at div
    at ChatMessage (webpack-internal:///./src/components/ChatMessage.js:24:25)
    at main
    at div
    at div
    at Layout (webpack-internal:///./src/components/layout.js:16:19)
    at MyApp (webpack-internal:///./src/pages/_appInner.js:21:18)
    at Provider (/testing/my_nextjs_app/node_modules/react-redux/lib/components/Provider.js:19:3)
    at MyAppWithRedux (webpack-internal:///./src/pages/_app.js:108:27)
    at StyleRegistry (/testing/my_nextjs_app/node_modules/styled-jsx/dist/index/index.js:449:36)
    at PathnameContextProviderAdapter (/testing/my_nextjs_app/node_modules/next/dist/shared/lib/router/adapters.js:78:11)
    at AppContainer (/testing/my_nextjs_app/node_modules/next/dist/server/render.js:346:29)
    at AppContainerWithIsomorphicFiberStructure (/testing/my_nextjs_app/node_modules/next/dist/server/render.js:382:57)
    at div
    at Body (/testing/my_nextjs_app/node_modules/next/dist/server/render.js:682:21)

My component that uses HighlightMenu is like this:

The app still works as expected. But can we do something to fix this warning? Thanks

[asyndesis]

Hey man-

Next creates bundles for both client and server. Probably you want to load this with next/dynamic https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading