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

jbccollins commented 1 month ago

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>
  );
}

arjunvegda commented 4 weeks ago

Thanks for reporting. I can't reproduce this locally on my end. Could you please create a repro on Stackblitz?

jbccollins commented 3 weeks ago

@arjunvegda Doing a bit more testing locally, this only happens for me when I switch the devtools to use dark mode. After that it happens on every page refresh. Could you give that a try and if you still can't reproduce I can make a stackblitz?

arjunvegda commented 3 weeks ago

Thanks! That caused it to throw an error. The error appears to come from Mantine. Do you want to take a stab at it? Perhaps we could create a small repro (without Jotai DevTools) and report it to Mantine. 🤔

jotaijs / jotai-devtools

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