search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.2k stars 27.02k forks source link

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

Open tsdineshjai opened 5 months ago

tsdineshjai commented 5 months ago

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 image image

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: https://github.com/vercel/turbo/discussions/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.

tsdineshjai commented 5 months ago

Can anyone look into this ?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

tsdineshjai commented 5 months ago

Is there anyway I can bring anyone notice to this ?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

Yashita1512 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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.

Sahajj commented 3 months ago

I am also facing the same problem please update here if you find a solution.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

akash942 commented 3 months ago

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 commented 3 months ago

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 : Screenshot 2024-08-25 124538

akash942 commented 3 months ago

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 commented 1 month ago

Recoil is not compatible with React 19 https://github.com/facebookexperimental/Recoil/issues/2318

googoocone commented 3 weeks ago

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

googoocone commented 3 weeks ago

do not use react 19 or higher