How I Fixed the "ReactCurrentDispatcher Undefined" Error in Recoil.js

I recently ran into an annoying error while using Recoil.js with React 19:

Uncaught TypeError: Cannot destructure property 'ReactCurrentDispatcher' of 'import_react.default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined.

This was happening because React 19 wasn't fully compatible with Recoil. The error occurred when Recoil tried to access React’s internal code, but React 19 had made some changes that broke this.

The Fix

1. Check for Duplicate React Versions I ran npm ls react and found multiple React versions. This often happens when dependencies pull in different React versions.

2. Downgrade to React 18 React 19 wasn’t playing well with Recoil, so I downgraded back to React 18. I updated my package.json to:

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "recoil": "^0.7.7"
   

   Then, I ran:

    npm install
   

3. Clean and Reinstall Dependencies I cleared out node_modules and package-lock.json to remove any old stuff:

    rm -rf node_modules package-lock.json
    npm install
    npm dedupe
   

4. Restart the Dev Server After reinstalling, I restarted the dev server:

    npm start
   

Conclusion

After all that, the error was gone, and my app was working fine again. If you're having the same issue, try downgrading to React 18 for now. Recoil should work much better with that version.

Hopefully, this helps save you some time