Usage of Recoil in Nextjs app (turborepo) induces a TypeError: Cannot destructure property 'ReactCurrentDispatcher.

[tsdineshjai]

Link to the code that reproduces this issue

https://github.com/tsdineshjai/PayTM_Repo

To Reproduce

1. NPM install globally (so that recoil package is also installed, that is the one causing issue)
2. Navigate to apps/user-app and npm run dev
3. Click localhost:3000
   
   

Current vs. Expected behavior

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.

The expected result should be a text on the page showing "the balance is 0", instead we get a unhandled runtime error.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
  Available memory (MB): 24303
  Available CPU cores: 8
Binaries:
  Node: 20.10.0
  npm: 10.8.1
Relevant Packages:
  next: 15.0.0-rc.0 // Latest available version is detected (15.0.0-rc.0).
  eslint-config-next: 15.0.0-rc.0
  react: 19.0.0-rc-f994737d14-20240522
  react-dom: 19.0.0-rc-f994737d14-20240522
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure, Output (export/standalone)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I have already raised the issue in turborepo GitHub repo as a discussion, assuming this is an issue related to turborepo.
link: vercel/turborepo#8373

I have been redirected here to post as an issue to get a guidance on the issue.

Note : There is no issue for the same code if it's a standalone application of turbopack. But it arises while using it in monorepo.

[Yashita1512]

Commenting here as well:

I was facing the same issue, finally found what was wrong.
So here are a few steps that may help you :

1. Remove node_modules, turbo cache(.turbo folder) and package-lock.json file from the root folder. (for uninstalling all dependencies and clearing the cached files).
2. Add "recoil" as a dependency in both, web/doc's package.json and packages/store's (the atoms store's) package.json
3. Then again install dependencies in the root folder.

Turbo will now install recoil in the root folder node_modules alongwith all other dependencies/libraries and make it available for those that added it as a dependency.
As turborepo does build system orchestration we need to specify the relevant dependencies for each of the workspaces as and when used. (Workspaces as in packages and apps(mentioning for clarity)).

[tsdineshjai]

Commenting here as well:

I was facing the same issue, finally found what was wrong. So here are a few steps that may help you :

1. Remove node_modules, turbo cache(.turbo folder) and package-lock.json file from the root folder. (for uninstalling all dependencies and clearing the cached files).

2. Add "recoil" as a dependency in both, web/doc's package.json and packages/store's (the atoms store's) package.json

3. Then again install dependencies in the root folder.

Turbo will now install recoil in the root folder node_modules alongwith all other dependencies/libraries and make it available for those that added it as a dependency. As turborepo does build system orchestration we need to specify the relevant dependencies for each of the workspaces as and when used. (Workspaces as in packages and apps(mentioning for clarity)).

Commenting here as well:

I was facing the same issue, finally found what was wrong. So here are a few steps that may help you :

1. Remove node_modules, turbo cache(.turbo folder) and package-lock.json file from the root folder. (for uninstalling all dependencies and clearing the cached files).

2. Add "recoil" as a dependency in both, web/doc's package.json and packages/store's (the atoms store's) package.json

3. Then again install dependencies in the root folder.

Turbo will now install recoil in the root folder node_modules alongwith all other dependencies/libraries and make it available for those that added it as a dependency. As turborepo does build system orchestration we need to specify the relevant dependencies for each of the workspaces as and when used. (Workspaces as in packages and apps(mentioning for clarity)).

I got your comment. Thanks. I will respond to you if these steps are working.

[tsdineshjai]

Commenting here as well:
I was facing the same issue, finally found what was wrong. So here are a few steps that may help you :

1. Remove node_modules, turbo cache(.turbo folder) and package-lock.json file from the root folder. (for uninstalling all dependencies and clearing the cached files).

2. Add "recoil" as a dependency in both, web/doc's package.json and packages/store's (the atoms store's) package.json

3. Then again install dependencies in the root folder.

Turbo will now install recoil in the root folder node_modules alongwith all other dependencies/libraries and make it available for those that added it as a dependency. As turborepo does build system orchestration we need to specify the relevant dependencies for each of the workspaces as and when used. (Workspaces as in packages and apps(mentioning for clarity)).

Commenting here as well:
I was facing the same issue, finally found what was wrong. So here are a few steps that may help you :

1. Remove node_modules, turbo cache(.turbo folder) and package-lock.json file from the root folder. (for uninstalling all dependencies and clearing the cached files).

2. Add "recoil" as a dependency in both, web/doc's package.json and packages/store's (the atoms store's) package.json

3. Then again install dependencies in the root folder.

Turbo will now install recoil in the root folder node_modules alongwith all other dependencies/libraries and make it available for those that added it as a dependency. As turborepo does build system orchestration we need to specify the relevant dependencies for each of the workspaces as and when used. (Workspaces as in packages and apps(mentioning for clarity)).

I got your comment. Thanks. I will respond to you if these steps are working.

It didnt work for me.

[akash942]

Had the same issue I solved it by adding a new nextJS project with "pnpx create-next-app@latest" in my apps folder
HOW DID THAT FIX IT?
=> So when you initialize a new turborepo, the nextjs version it uses for already added docs and web app is "15.0.0-rc.0" and same for react (19.0.0-rc-f994737d14-20240522) and react-dom (19.0.0-rc-f994737d14-20240522) here rc stands for the release candidate version which is not stable right now and vercel did say they will release a stable version of nextjs 15 soon here: https://nextjs.org/blog/next-15-rc
So till then you might want to use nextjs 14 which is stable

[akash942]

Had the same issue I solved it by adding a new nextJS project with "pnpx create-next-app@latest" in my apps folder HOW DID THAT FIX IT? => So when you initialize a new turborepo, the nextjs version it uses for already added docs and web app is "15.0.0-rc.0" and same for react (19.0.0-rc-f994737d14-20240522) and react-dom (19.0.0-rc-f994737d14-20240522) here rc stands for the release candidate version which is not stable right now and vercel did say they will release a stable version of nextjs 15 soon here: https://nextjs.org/blog/next-15-rc So till then you might want to use nextjs 14 which is stable

They also mentioned this in here https://nextjs.org/blog/next-15-rc :

[akash942]

To make it work in your current directory:
go to your apps/your-app folder which is using the release candidate version and do:
pnpm remove next react react-dom
then install all the stable versions by doing:
pnpm add next@latest react@latest react-dom@latest
also make sure to do a install on your root folder as well by doing:
pnpm i
now it should work
pnpm run dev

[Linux249]

Recoil is not compatible with React 19 facebookexperimental/Recoil#2318

[googoocone]

If the Next.js version you're using is 14 or higher, downgrade it to 13.

[googoocone]

do not use react 19 or higher