TypeError: Invalid value used as weak map key

[seeatend]

I got this issue when I defined atom in typescript outside the component

interface User {
  id: string;
  name: string;
}
export const userAtom = atom<{
  [key: string]: User;
}>({}); 

[dai-shi]

Can you create a smallest possible reproduction with https://csb.jotai.org ?

[seeatend]

Yes

[seeatend]

I forgot to import the atom somewhere in the project. It's my mistake. Sorry!

[rafark]

@dai-shi I got the same error when passing undefined to useAtom(). By the looks of it, it was the same case for the OP. Perhaps useAtom() should throw an error when passing undefined instead of the current cryptic error message?

[Ding-Fan]

In my situation, this error was caused by the name of my atom theYCarouselAtom , if I use theCarouselAtom this error is gone

in my atoms.ts

import { atom } from "jotai";
import { createRef } from "react";

// Jotai atoms
export const theCarouselAtom = atom({
// this won't work
// export const theYCarouselAtom = atom({
  slideListRef: createRef<HTMLDivElement>(),
  onNextClick: () => {},
  onPrevClick: () => {},
  nextDisabled: false,
  prevDisabled: true,
  activeSlide: 0,
});

[erdoganabaci]

Thats bad solution

[erdoganabaci]

TypeError: Invalid value used as weak map key problem occurs If you have index.tsx file during aggregate imports you have to be careful!!

Dont use aggragated index.tsx file for import atom

import { test1Atom, test2Atom } from "../../example/atoms"

Use direct referance of atoms

import { test1Atom, test2Atom } from "../../example/atoms/test.atoms"

here the index.tsx file of atoms folder=>

export * from "./test1.atom"
export * from "./test2.atom"
export * from "./test3.atom"
export * from "./test4.atom"
export * from "./tree5.atom"

If possible, avoid using index.tsx for aggregating and re-exporting atoms. Instead, import them directly from their respective files. This will ensure that each atom maintains its unique reference.