scale

scale copied to clipboard

The <ScaleTelekomFooter> 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" } }

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.

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 ?

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!

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.

According to this comment pointing to https://github.com/facebook/react/pull/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.

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?