ScaleTelekomFooter throws hydration error

[rbcm1]

The component throws an hydration error (here using React wrapper, but issue also happens with the plain HTML component):

<ScaleTelekomFooter> <ScaleTelekomFooterContent> <span slot="notice">{new Date().getFullYear()} © Deutsche Telekom AG </span> </ScaleTelekomFooterContent> </ScaleTelekomFooter>

Using with React 18.2.0 and beta.131. Package.json:

{ "name": "berec-vas-pws-webapp", "version": "1.0.0", "private": true, "dependencies": { "@telekom/scale-components": "^3.0.0-beta.131", "@telekom/scale-components-react": "^3.0.0-beta.131", "eslint": "8.37.0", "eslint-config-next": "13.2.4", "next": "^13.3.0", "react": "18.2.0", "react-dom": "18.2.0" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" } }

[acstll]

Thanks for reporting once more @rbcm1

We've been able to reproduce it in a Next.js project. We assume there's something in the markup of the new Footer causing this kind of error. We'll try and find what it is pretty soon.

[felix-ico]

i found this sample implementation from the next docs https://github.com/vercel/next.js/blob/canary/examples/with-stencil/packages/web-app/pages/_app.js, and I was able to get rid of all errors by defining the custom elements in _app.js like this:

import { useLayoutEffect } from 'react'
import { ScaleTelekomFooter, ScaleTelekomFooterContent } from '@telekom/scale-components-react';
import { defineCustomElements, applyPolyfills } from '@telekom/scale-components/loader';

export default function App({}) {
  useLayoutEffect(() => {
    applyPolyfills().then(() => {
      defineCustomElements()
    })
  }, [])  
  return (
    <div>
      <ScaleTelekomFooter> 
        <ScaleTelekomFooterContent> 
          <span slot="notice">{new Date().getFullYear()} © Deutsche Telekom AG </span> 
        </ScaleTelekomFooterContent> 
      </ScaleTelekomFooter>
    </div>      
  )
}

would this solution work for you @rbcm1 ?

[rbcm1]

Hi @felix-ico,

just did a quick test on my side and this seems to work.
Let me check with one of my React experts and I will let you know soon!

[rbcm1]

Hi @felix-ico,

didn't notice this on the log file:

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.

So, it seems like this workaround is not really ideal. But again: let me check with one my team members and I will let you know.

[acstll]

According to this comment pointing to facebook/react#26395, the warning is being removed from React. I agree the solution is probably not ideal, but maybe it's not that bad either.

We're looking forward to the feedback from the team.

[rbcm1]

For now we will go ahead and use the workaround suggested.
Any additional findings on this one and whether a fix / improvement will be provided?