[turborepo] Usage of Recoil in Nextjs app induces a TypeError: TypeError: Cannot destructure property 'ReactCurrentDispatcher' of '__TURBOPACK__imported__

[tsdineshjai]

Summary

I have added store as package in the turborepo, which contains Recoil as state management. A hook named "useBalance" was added, which returns the state of an atom.(basic unit of recoil). Exported the hook file. Added the "store" package as dependency to the Next.js app.
The issue arises whenever I try to invoke "useBalance" hook in the Next.js app.

Steps taken to solve the issue:

1. Updated Node and Npm versions to the latest.
2. removed node_modules of turbo repo and removed .next folder of Next.js App. Reinstalled again.
3. Changed the node version value in engine of package.json of the root .

Steps to reproduce the issue:
https://github.com/tsdineshjai/PayTM_Repo

Navigate to apps/user-app and npm run dev. Click localhost:3000

Key Issue: Integration issue of Recoil into NextJs app

Additional information

"recoil": "^0.7.7"
"next": "15.0.0-rc.0",
"node" : "v22.2.0",
"npm" : "10.8.1"

Example

https://github.com/tsdineshjai/PayTM_Repo

[tsdineshjai]

Do I need to create an issue for this discussion or this will be suffice ?

[tsdineshjai]

ackages and apps

Thanks. I will give it a try and will respond to you if it works.

[tsdineshjai]

ackages and apps

Thanks. I will give it a try and will respond to you if it works.

It didnt work for me.

[Lakshyyaa]

hey going through the exact same problem, any luck?
i just cant install recoil in a next app in turborepo and if i use --force i feel i'll eventually end up messing up

[Yashita1512]

One update - Also try deleting the .next and node_modules folders from both the apps. Apparently the .next cache is causing the type error and not allowing next to use the newly installed dependencies. I faced the same issue with the 'docs' app and nothing was working, finally this worked for me.

[Yashita1512]

This was another step to be done before trying the above. I posted it 2 days back, I think it was missed.

Here's my package.json code for the next-app, store and root turborepo. Replace these and try installing recoil in the root folder. It should work.

https://opposite-wax-112.notion.site/package-json-for-all-3-9f68dd2d5e204ce783f24c5c319ef515

[Yashita1512]

Here's my package.json code for the next-app, store and root turborepo. Replace these and try installing recoil in the root folder. It should work.

https://opposite-wax-112.notion.site/package-json-for-all-3-9f68dd2d5e204ce783f24c5c319ef515

[Rishiii7]

Thanks! it's working for me

[faraaz-inc]

After banging my head on this issue for hours, now i think the problem lies with Recoil not supporting React 19 RC that came out last month(check out this issue in recoil's repo facebookexperimental/Recoil#2318 ).
Thats why we are facing this issue as create-turbo@latest uses this version currently.
@Yashita1512 is having react 18, thats why it works.

[Rishiii7]

Yeah, when i was installing recoil in user-app, I could not install it giving me an npm error. Afterwords I changed the react, react-dom version to 18.3.1 and next to ^12.0.0 . Still didn't work for me.

It woked as mentioned by @Yashita1512

[Rethick11]

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

It only works with above configuration in next app and 
change next.config.ts => next.config.js and in that file paste


/** @type {import('next').NextConfig} */

module.exports = {

};
issue solved for me :)

[udayempire]

I installed react 18 but stil facing the issue