-
SummarysummuryIs there someone to know that why this error resolved by solution I did. I've been trying to migrate my project from the Pages Router to the App Router. However, after introducing the App Router, I'm encountering the following error: I believe this error is caused by having two copies of React loaded in the application. I've tried the following solutions:
My Hypothesis:My theory is that the Next.js App Router runtime has its own bundled version of React. When I use our custom webpack override, my application code (e.g., page.tsx) resolves React from the project's node_modules, while the Next.js internal runtime uses its own bundled version. This results in two different instances of React being active, which causes the "Invalid hook call" error. Additional informationmy minimum environment here.
let me know why this error resolved by solution I did
https://github.com/Michael0Q/error_example_app_routerExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
This usually happens when theres' two (or multiple really) React/React-DOM versions applied to the same project. |
Beta Was this translation helpful? Give feedback.
-
|
And yes, App Router uses the canary channel internally, so in your case it is likely the case that expectations are broken when you tell webpack to resolve react/react-dom from |
Beta Was this translation helpful? Give feedback.
-
|
Last but not least I was gonna ask for the reason to do this particular import... but you don't know either ~ maybe a git blame pass could yield more info? |
Beta Was this translation helpful? Give feedback.
-
|
thank you so much collaborator, I'm grateful for that answered by collaborator. |
Beta Was this translation helpful? Give feedback.
And yes, App Router uses the canary channel internally, so in your case it is likely the case that expectations are broken when you tell webpack to resolve react/react-dom from
node_modulesrather.