Even though only one Jotai instance is used without defaultStore, a warning window saying "Detected multiple Jotai instances. "It may cause unexpected behavior with the default store"

[brgndyy]

hello

Currently, I am trying to set theme values ​​for dark mode in jotai and manage them globally.

However, even though it keeps holding only one themeAtom value,

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

This error appears.

The default store was not used.

What's the problem?

- themeAtom.ts

import { atom } from 'jotai';

export const themeAtom = atom<boolean>(false);

- useTheme.ts

import { useEffect, useState } from 'react';
import { useSetAtom } from 'jotai';
import { themeAtom } from '@/_store/themeAtom';

export const useTheme = (currentTheme: string) => {

  const [darkTheme, setDarkTheme] = useState<boolean>(currentTheme === 'dark');

  const setDarkMode = useSetAtom(themeAtom);

  useEffect(() => {
    setDarkMode(darkTheme);
  }, [darkTheme, setDarkMode]);

I thought I should wrap it in a Provider, so I created it as a Provider and wrapped it, but this error still appears.

'use client';

import { Provider } from 'jotai';

interface Props extends React.PropsWithChildren {}

export default function JotaiProvider({ children }: Props): JSX.Element {
  return <Provider>{children}</Provider>;
}

Now I'm using Next.js 14. thanks

[dai-shi]

That's weird, but I'm pretty sure the default store is used somewhere by accident. Are you with the latest version of Jotai?

[brgndyy]

yes my version is "jotai": "^2.5.1",

Even if I delete jotai and reinstall it, it's the same.

Does this error only occur when using the default store?

[dai-shi]

Yeah:

jotai/src/vanilla/store.ts

Lines 796 to 809 in 18fea39

	export const getDefaultStore = () => {
	if (!defaultStore) {
	if (
	import.meta.env?.MODE !== 'production' &&
	(globalThis as any).__NUMBER_OF_JOTAI_INSTANCES__ !== 1
	) {
	console.warn(
	'Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044',
	)
	}
	defaultStore = createStore()
	}
	return defaultStore
	}

[alwalxed]

Hi, I'm facing the same issue as you. Any updates? My code's nearly identical, plus Next.js. Ignore it?

[dai-shi]

#2462 improved it, but maybe unrelated to Nextjs. If you still see the warning without HMR, there might be a potential issue.

[shadhin8121]

I am also facing the same problem, but I ignored it. I just use useAtom and atom() on my website. I see the same warning, and I don't use other Jotai features because I just wanted something simple for passing data without prop drilling. My current Jotai version is jotai: ^2.8.4. I don't use the default store( I don't even know what it is ). why am I facing this problem?

[dai-shi]

If you don't use <Provider>, it means you are using the default store. Assuming you don't use Next.js or something similar, what can happen is when you modify a file that contains your atom definitions and your dev server hot reloads. In this case, I think it's safe to ignore.