Dev mode: useLayoutEffect warning is back

[nkuehn]

Dev mode now throws the following 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.

The only place where we directly use it is still the sidebar, but there is a specific comment and handling for the case. Maybe we need to revisit the possible workarounds / fixes from the react docs and pick a different one, .

[gabriele-ct]

Some findings:

• the warning definitely doesn't come from the sidebar. I even tried to remove entirely the code and I still get the warning when the homepage loads. As additional confirmation, disabling the isomorphic hack in sidebar, I get a lot more of warnings.
• The warning is certainly generated by some code in @commercetools-docs/gatsby-theme-docs package as even the most minimal implementation (websites/site-template) generates that warning and the only dependency it has is indeed @commercetools-docs/gatsby-theme-docs
• My hypothesis is that it might be related to some dependency we use that is not ssr safe, but I can't figure out what is actually causing the error
• Looking at the error stack trace I can guess it's something related with the MDXProvider (see below the stack trace)

at ThemeProvider (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:626:79)
    at LayoutApplication (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:55655:32)
    at LayoutContentHomepage (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:55446:78)
    at ErrorBoundary (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:53951:5)
    at ThemeProvider (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:54971:258)
    at IntlProvider (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:127796:47)
    at HomepageTemplate (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:56898:16)
    at RouteHandler (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:140597:5)
    at div
    at FocusHandlerImpl (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:59732:5)
    at FocusHandler (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:59703:19)
    at RouterImpl (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:59608:5)
    at Location (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:59437:23)
    at Router
    at ServerLocation (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:59545:19)
    at MDXProvider (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:28095:46)
    at MDXScopeProvider (/Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:53131:3)
    at /Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:53351:15
    at /Users/gabrieleantonini/projects/commercetools-docs-kit/websites/site-template/.cache/page-ssr/routes/render-page.js:28078:48

[gabriele-ct]

Running grep -rnwl '.' -e 'useLayoutEffect in the node_modules directory returns several results of files containing useLayoutEffect but here is how far i can get. @nkuehn and @FFawzy any idea?

[emmenko]

I think this is coming from uikit's ThemeProvider

https://github.com/commercetools/ui-kit/blob/0a42178c2c733cf31120fa208db182399887677e/design-system/src/theme-provider.tsx#L71

We'll think about making it more SSR compatible. cc @CarlosCortizasCT

[gabriele-ct]

I think this is coming from uikit's ThemeProvider

you just need to ask to the right people 🤣

[emmenko]

FYI: opened a tracking issue commercetools/ui-kit#2329

[nkuehn]

Thank you @emmenko !

[nkuehn]

I'll close this now because a root cause fix is out of scope for this repo and the practical issue is resolved for now.