jotai-devtools icon indicating copy to clipboard operation
jotai-devtools copied to clipboard

Published 20 hours ago • verified publisher icon jotaijs

Jotai Devtools spits out a mismatched server/client props warning when used in Nextjs 14

Open jbccollins opened this issue 7 months ago • 3 comments

Warning: Prop style did 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>
  );
}

jbccollins avatar Jul 02 '24 05:07 jbccollins