TelegramUI icon indicating copy to clipboard operation
TelegramUI copied to clipboard

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

Open coolroman opened this issue 2 months ago • 1 comments

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

coolroman avatar Apr 17 '24 16:04 coolroman