React Hook is called conditionally in /api/example/route.ts
Answered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Schneider’s Smooth-fronted CaimanOP
Hi all,
I'm seeking help troubleshooting an error that seems to have popped up randomly on me. I have an /api route where I call pg-native db functions in @/utils/. I'm using next 14.1.4 and app router. The app runs fine in dev, and I have many api pages that call functions from this db library, but for some reason this one in this spot gives me issues. Here's the full error when running
The funny thing is I'm not calling this from a 'component'.
Any ideas what could be causing this? Full repo at the page where
I'm seeking help troubleshooting an error that seems to have popped up randomly on me. I have an /api route where I call pg-native db functions in @/utils/. I'm using next 14.1.4 and app router. The app runs fine in dev, and I have many api pages that call functions from this db library, but for some reason this one in this spot gives me issues. Here's the full error when running
npm run build./src/app/api/user/activateUser/route.ts
34:24 Error: React Hook "useInviteCode" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? react-hooks/rules-of-hooksThe funny thing is I'm not calling this from a 'component'.
Any ideas what could be causing this? Full repo at the page where
useInviteCode is called: https://github.com/MetaWarrior-Army/mwa-auth/blob/ae8faa8ab2217441f42287a9e5fb7791746be1d6/src/app/api/user/activateUser/route.ts#L34C1-L34C5315 Replies
Schneider’s Smooth-fronted CaimanOP
So an update from some research and additional troubleshooting:
Disabling ESLint allows the app to compile. I just learned something about react and NextJS. I didn't even realize what ESLint was doing. Thats what was generating the error and stopping the build process.
However, I'm curious now. I have to move on since I'm making progress, but is this working as intended? I wasn't expecting to get react involved in the /api. I always thought of that as native js/ts.
Disabling ESLint allows the app to compile. I just learned something about react and NextJS. I didn't even realize what ESLint was doing. Thats what was generating the error and stopping the build process.
However, I'm curious now. I have to move on since I'm making progress, but is this working as intended? I wasn't expecting to get react involved in the /api. I always thought of that as native js/ts.
Also, I tried switching from
strict to base ESLint configuration in .eslintrc.json, but that didn't work either. I had to empty the file completely.Also used
npm run lint for the very first time troubleshooting this 😅@Schneider’s Smooth-fronted Caiman So an update from some research and additional troubleshooting:
Disabling ESLint allows the app to compile. I just learned something about react and NextJS. I didn't even realize what ESLint was doing. Thats what was generating the error and stopping the build process.
However, I'm curious now. I have to move on since I'm making progress, but is this working as intended? I wasn't expecting to get react involved in the /api. I always thought of that as native js/ts.
yes it was working as intended. eslint simply checks for all usage of all functions named like react hooks, in all files where it is configured to check, which in the case of your app, is every single js/ts file.
the way to fix it is to rename your function to make it not look like a hook
@joulev the way to fix it is to rename your function to make it not look like a hook
Schneider’s Smooth-fronted CaimanOP
oh! .... wait... what do react hooks look like? 😅
@Schneider’s Smooth-fronted Caiman oh! .... wait... what do react hooks look like? 😅
functions that start with "use"
Answer
e.g.,
useState, useEffect, useUser, useProduct, etc.Schneider’s Smooth-fronted CaimanOP
Oh jeebs. Thanks so much... 😮💨
I was so surprised by the association of react with route.ts I would have never thought of that.
nextjs knows your route is not a react component, but eslint doesn't know that. as far as eslint is concerned, you are apparently using a "hook" in a way you are not supposed to
Schneider’s Smooth-fronted CaimanOP
Right... completely forgot ESLint was a thing too and thats what was failing.
I knew I was missing something fundamental
Thanks so much