recoiljs

[Error: Invalid argument to useRecoilState: expected an atom or selector but got undefined]


I've been using React and Recoil since I've been walking, and this is such a simple issue that I just must not be seeing something obvious. I have a recoil state that gets populated upon a user signIn. It populated for sure because I tested this with a console.log.

This means that at one point, videos and setVideos worked. Now, once logged in, if I go to the Videos page, I get hit with the error in then title:

[Error: Invalid argument to useRecoilState: expected an atom or selector but got undefined]

Which is stupid. The syntax is identical for that and the other recoil state in that same page that works fine. I truly have no idea what could be causing this, aside from the fact that this recoil state is an array of objects and the successful one is just one object. The atom file looks like this...

import { atom } from 'recoil';

import { COLORS, FONTS, SIZES } from '../NutonConstants';

/////////////
// GENERAL //
/////////////

    // Determines the Active User. Duh
    export const userState = atom({
        key: 'userState',
        default: false,
    });

    // Determines the Token from Login or SignUp
    export const tokenState = atom({
        key: 'tokenState',
        default: false
    })

    // Holds Client List Data
    export const clientListState = atom({
        key: 'clientListState',
        default: false
    })

    // Only to be used when the USER is the Organization Owner
    export const organizationState = atom({
        key: "organizationState",
        default: false
    })

    // Tracks all videos from API upon login
    export const videoState = atom({
        key: "videoState",
        default: false
    })

and the file that keeps erroring out calls its recoil states as so...

    ////////////
    // Recoil //
    ////////////

        // User State
        const [user, setUser] = useRecoilState(userState)

        // Video State
        const [videos, setVideos] = useRecoilState(videoState)


Solution

  • I had the same issue, turns out I was importing the atom wrong. Check if you're importing the atom using object destructuring as you're exporting the variable without the export default, if you aren't, then that may be the issue.