Telegram-Mini-Apps / TelegramUI

React components library for Telegram Mini Apps inspired by Telegram interface
https://ton.org/mini-apps
MIT License
59 stars 5 forks source link

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

Open coolroman opened 4 weeks ago

coolroman commented 4 weeks ago

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)/../nodemodules/.pnpm/@xelene+tgui@2.1.1@types+react-dom@18.2.25_@types+react@18.2.79_react-dom@18.2.0_react@18.2.0/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 commented 1 week ago

the same error with the same environment