-
Notifications
You must be signed in to change notification settings - Fork 26.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Invalid hook call in 9.0.6 #9022
Comments
@baldurh This is indeed very uncommon, when using platforms like Now only the folder where the Next.js app lives is deployed, it's better that way because otherwise you would need to know about all the external modules first. 2 better alternatives are:
|
@lfades thanks for the reply. Neither of those options are available to us and we're not deploying to Now or anything similar. We used yarn workspaces initially but then we integrated bazel and it does not play nicely with the symlinking nature of yarn workspaces. Npm packages means we cannot develop the shared modules as fast as we like. It's just too much overhead. |
@baldurh Just ran into this with next-i18next as we've got nested NextJs apps as examples. Did you find a workaround? |
@isaachinman We have not. We haven’t managed to upgrade to 9.x yet because of other reasons so I haven’t been looking into it. Does anyone have an idea of where the code affecting this might be? I’d love to understand the problem better. |
I haven't had time to dig into this yet, but if anyone needs a repro: clone next-i18next, It's currently on 9.0.3, so this is technically a breaking change on a patch. |
I had a similar error come up recently and had to downgrade to 9.0.5 (and React 16.8.x). I sort of narrowed down the problem I saw to Next's use of MDX, but I don't have any concrete details beyond that. |
I've dug into the same issue with a pretty big project based on Next & next-i18next. I saw that this error can be thrown by 3 reasons:
The strange thing is that it happens only on production build. |
@timneutkens @Timer sorry for tagging you in this but I’d love some input from you. Do you think this is something that could be fixed do we all need to implement some workarounds? This is a pretty big blocker for us at the moment. Thanks. |
It seems you aliased |
@Timer Thanks. I tried but it did not have any effect |
I was able to resolve this just now in the repro by moving the |
@Timer I got this working in our project but I also had to make sure I had no other dependencies which installed |
Ah, yes. Improperly published |
Can you elaborate regarding the changes that you have done in this repo? I run |
@felixmosh Sorry, apparently the push failed for me yesterday. Now the changes are definitely there 😅 I moved We’re going to have to do some changes to our build system to get this working in production so this solution is still a bit of a hassle for us 😝 |
Thanx for the explanation, I will wait for Next team to solve it, sounds a bit weird to put react deps on the root of my mono-repo... |
@felixmosh Yeah I kind of agree with you. However, if you use something like yarn workspaces that’s exactly what that tool will do. If you have the same dependency in two or more projects it will hoist the dependencies to the root. It’s nice because it ensures that you have the same version of the dependencies in all your projects. But if you don’t have a tool like that you’d have to manage it yourself which is indeed a bit awkward. I agree the best solution would be that the Next.js team takes a look and solves this for all of us 😇🙏🏻 |
Running into the same issue, and bringing |
Hi any update on this issue? We have a monorepo and we are encountering this exact issue. |
Meet with the same problem. Starting from 9.0.6 till 9.1.6-canary.5 have the same problems. The problem occurs only on the server-side. If SSR disabled (eg. load external component via dynamic) then all works as expected for versions >=9.0.6. |
@nodkz it is an issue with react package resolving, therefore it happens only in node. |
Also having issue on next.js 10.0.5, had to add npm-force-resolutions and force resolutions to solve it. |
@jeremiedubuis Could you share what that looks like? I've never been able to get it to work reliably with next.js |
This works for us as well but it breaks styled-components on SSR 😞 |
I recently erroneously removed react and react-dom from peerDependencies of a library my Next app consumes. This resulted in the error described herein for some reason. Adding those items back in the library and then upgrading the version inside my Next project made this error go away. So my takeaway is: If you control one or more of the libraries in your project, make sure to include react and react-dom in peerDependencies. |
@JaredMichel Now even with |
This works to me. |
This is exhausting export function useWindowDimensions() { useEffect(() => {
}, []); return { creating simple hook in Nextjs is throwing hook error |
@kodunmi Try checking for Wrap window dependant code in an if block like this: if (typeof window !== 'undefined') {
// your window dependant code
} Window is undefined on server side. |
I'm checking it on the getWindowDimensions function That's not the issue function getWindowDimensions() { return null } |
@kodunmi You are adding an event listener for "resize" on window object later on in your hook's useEffect hook. You should also move handleResize() function definition outside the hook. export function useWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
useEffect(() => {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener('resize', handleResize); // <---- you are calling window here
return () => window.removeEventListener('resize', handleResize); // <---- and here
}, []);
return {
windowDimensions,
};
} |
Okay I will restructure the code But my problem is not that code My problem is using hook in custom hook is throwing error `export function useWindowDimensions() { return counter the above still throws Error: Invalid hook call. |
thank you this did wonders and liberated me from the misery i have been entailing |
I'm still facing this issue today. Straight-away The latest dependencies are: |
You are likely having a project setup issue, maybe a symlink or a global install on |
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Bug report
Describe the bug
When you use react a component residing outside the main Next.js project folder which uses hooks. You end up getting
Invalid hook call
error and the application breaks. Components without hooks work as expected.The bug appears in all versions
>9.0.5
when you change the webpack config so that files outside the main folder are transpiled. It’s working fine in<=9.0.5
To Reproduce
Check out the repro at https://github.com/baldurh/next-9.0.6-bug-repro
Expected behavior
The code should not break when using files outside the project folder.
System information
>=9.0.6
Additional context
I know this is probably not a common use of Next.js but in our project we’re using a monorepo and have a shared folder with components used by multiple applications. It would be nice to get this working again. If someone finds an alternative config we could use I’d also be happy to do that 🙂
The text was updated successfully, but these errors were encountered: