Jotai Devtools spits out a mismatched server/client props warning when used in Nextjs 14
#155 opened on Jul 2, 2024
Repository metrics
- Stars
- (184 stars)
- PR merge metrics
- (No merged PRs in 30d)
Description
Warning: Prop
styledid not match. Server: "--ai-radius:50%;--ai-bg:var(--mantine-color-dark-filled);--ai-hover:var(--mantine-color-dark-filled-hover);--ai-color:var(--mantine-color-white);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;border-width:0;z-index:99999;width:calc(4rem * var(--mantine-scale));height:calc(4rem * var(--mantine-scale));position:fixed;top:unset;left:0.2rem;bottom:0.2rem;right:unset" Client: "--ai-radius:50%;--ai-bg:var(--mantine-color-gray-3);--ai-hover:var(--mantine-color-gray-4);--ai-color:var(--mantine-color-white);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;border-width:0;z-index:99999;width:calc(4rem * var(--mantine-scale));height:calc(4rem * var(--mantine-scale));position:fixed;top:unset;left:0.2rem;bottom:0.2rem;right:unset"
store/index.ts
import { createStore } from 'jotai';
const store = createStore()
export default store;
ClientProviders.tsx
"use client";
import store from "@/store";
import { Provider } from "jotai";
import { DevTools } from "jotai-devtools";
import { ReactNode } from "react";
import "jotai-devtools/styles.css";
export default function ClientProviders({ children }: { children: ReactNode }) {
return (
<Provider store={store}>
<DevTools store={store} />
{children}
</Provider>
);
}
layout.tsx
import ClientProviders from "@/providers/ClientProviders";
import "./globals.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ClientProviders>{children}</ClientProviders>
</body>
</html>
);
}