Getting warning message: Prop `className` did not match with Next.js

[coolroman]

Getting this warning in browser console:

Warning: Prop className did not match. Server: "tgui-6a12827a138e8827" Client: "tgui-6a12827a138e8827 tgui-865b921add8ee075" at div at eval (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@xelene/tgui/dist/components/Service/AppRoot/AppRoot.js:33:21)

Minimal Next.js app with layout.tsx:

import "@xelene/tgui/dist/styles.css";

import { AppRoot, Placeholder } from "@xelene/tgui";

export default function Home() {
  console.log("Home");
  return (
    <AppRoot>
      <Placeholder header="Title" description="Description">
        <img
          alt="Telegram sticker"
          src="https://xelene.me/telegram.gif"
          style={{ display: "block", width: "144px", height: "144px" }}
        />
      </Placeholder>
    </AppRoot>
  );
}

Dependencies:

@tma.js/sdk 1.5.3 @tma.js/sdk-react 2.0.3 @xelene/tgui 2.1.1 next 14.2.1 react 18.2.0 react-dom 18.2.0

[evgenTraytyak]

the same error with the same environment

[otzarri]

Same here with this configuration:

  "dependencies": {
    "@telegram-apps/telegram-ui": "^2.1.4",
    "@tma.js/sdk-react": "^2.2.4",
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18"
  }

[wakeupwakeupwakeup]

Same issue

[mrEscape]

The same, but with Remix. No updates? How to handle this issue?