Detected multiple Jotai instances. It may cause unexpected behavior with the default store. I want to avoid the warning https://github.com/pmndrs/jotai/discussions/2044

[nakazawashinichi]

Detected multiple Jotai instances. It may cause unexpected behavior with the default store. #2044

I use AppRoute with Next.js14 and use jotai in WebSocketHook as shown below.
There is no problem when initially displayed in the browser, but the above warning will be displayed when you super reload or change the page.
I checked on ChatGpt and found that it can be suppressed by setting "SUPPRESS_JOTAI_DUPLICATE_INSTANCE_WARNING=true", but I would like to fundamentally solve it if possible.

■Environmental condition
Next.js14
jotai2.7.0

■/src/hooks/WebSocketHook.tsx

import { useAtom } from "jotai";
import { socketAtom } from "@/store/WebSocketStatus";
import { useEffect } from "react";

declare global {
var __websocket: WebSocket | undefined;
}

export function WebSocketHook() {
const [socket, setSocket] = useAtom(socketAtom);
useEffect(() => {
if (globalThis.__websocket !== undefined) {
setSocket(globalThis.__websocket);
return;
}
const newSocket = new WebSocket("ws://localhost:8085/ws/");

scss
Copy code
newSocket.onclose = () => {
  console.log("Socket is closed. Reconnecting...");
  setTimeout(() => {
    const reconnectSocket = new WebSocket("ws://localhost:8085/ws/");
    globalThis.__websocket = reconnectSocket;
    setSocket(reconnectSocket);
  }, 1000);
};
globalThis.__websocket = newSocket;

setSocket(newSocket);
}, [setSocket]);
}

■/src/app/(commonlayout)/layout.tsx

"use client";
import Image from "next/image";
import { SessionProvider } from "next-auth/react";
import styles from "./_style/layout.module.scss";
import Header from "@/components/templates/Header";
import Footer from "@/components/templates/Footer";
import { useState, useEffect } from "react";
import { Drawer, Box, Typography } from "@mui/material";
import { WebSocketHook } from "@/hooks/WebSocketHook";

export default function CommonLayout({
children,
}: {
children: React.ReactNode;
}) {
WebSocketHook();
return (
<SessionProvider>
<div className={styles.layout}>
<header>
<Header />
</header>
<div className={styles.container}>{children}</div>
{/* <footer>
<Footer />
</footer> */}
</div>
</SessionProvider>
);
}

■/next.config.js

const path = require("path");

/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config) => {
config.resolve.alias["jotai"] = path.resolve(
__dirname,
"node_modules/jotai"
);
return config;
},
};

module.exports = nextConfig;

■/tsconfig.json

{
"compilerOptions": {
"baseUrl": ".",
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],

json
Copy code
"paths": {
  "@/*": ["./src/*"]
  ,"jotai": ["node_modules/jotai"]
}
},
"include": ["next-env.d.ts", "/*.ts", "/.tsx", ".next/types/**/.ts"],
"exclude": ["node_modules"]
}

[dai-shi]

Can you translate your title and description in English, maybe using some machine translators?

[nakazawashinichi]

excuse me.
I have now translated it into English, so please check it.

[dai-shi]

I checked on ChatGpt and found that it can be suppressed by setting "SUPPRESS_JOTAI_DUPLICATE_INSTANCE_WARNING=true"

It's a lie by ChatGPT. Please don't simply trust what ChatGPT says.

[dai-shi]

but I would like to fundamentally solve it if possible.

The warning is correct. You are misusing it. You need to use Provider with Next.js.

jotai/docs/guides/nextjs.mdx

Lines 52 to 68 in c974d15

	### Provider
	By default, Jotai uses an implicit global store to keep track of atom values. This is what is referred to as "provider-less" mode. This becomes an issue in SSR scenario because this global store is kept alive and is shared between multiple requests, which can lead to bugs and security risks.
	To limit the lifetime of the store to the scope of one request, you need to use a [Provider](../core/provider.mdx) at the root of your app (or a subtree if you're using Jotai only for a part of your application).
	```typescript
	import { Provider } from 'jotai'
	function App({ Component, pageProps }: AppProps) {
	return (
	<Provider>
	<Component {...pageProps} />
	</Provider>
	)
	}
	```

[nakazawashinichi]

thank you.
I set the Provider in the range I want to use jotai.
If this continues, the same warning will appear again.
How can I pass the contents of the store I created (WebSocketStatus) to the Provider and reference it?

■/src/app/(commonlayout)/layout.tsx

"use client";
import Image from "next/image";
import { SessionProvider } from "next-auth/react";
import styles from "./_style/layout.module.scss";
import Header from "@/components/templates/Header";
import Footer from "@/components/templates/Footer";
import { useState, useEffect } from "react";
import { Drawer, Box, Typography } from "@mui/material";
import { WebSocketHook } from "@/hooks/WebSocketHook";
import { Provider } from "jotai";

export default function CommonLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  WebSocketHook();
  return (
    <Provider>
      <SessionProvider>
        <div className={styles.layout}>
          <header>
            <Header />
          </header>
          <div className={styles.container}>{children}</div>
          {/* <footer>
          <Footer />
        </footer> */}
        </div>
      </SessionProvider>
    </Provider>
  );
}

■/src/hooks/WebSocketHook.tsx

import { useAtom } from "jotai";
import { socketAtom } from "@/store/WebSocketStatus";
import { useEffect } from "react";

declare global {
  var __websocket: WebSocket | undefined;
}

export function WebSocketHook() {
  const [socket, setSocket] = useAtom(socketAtom);
  useEffect(() => {
    if (globalThis.__websocket !== undefined) {
      setSocket(globalThis.__websocket);
      return;
    }
    const newSocket = new WebSocket("ws://localhost:8085/ws/");

    newSocket.onclose = () => {
      console.log("Socket is closed. Reconnecting...");
      setTimeout(() => {
        const reconnectSocket = new WebSocket("ws://localhost:8085/ws/");
        globalThis.__websocket = reconnectSocket;
        setSocket(reconnectSocket);
      }, 1000);
    };
    globalThis.__websocket = newSocket;

    setSocket(newSocket);
  }, [setSocket]);
}

■/src/store/WebSocketStatus

import { atom } from "jotai";

export const socketAtom = atom<WebSocket | null>(null);

[dai-shi]

the same warning will appear again.

It means that you are using the atom outside the Provider tree. Please make sure to put Provider close to the root.

[nakazawashinichi]

thank you.