Issue when deploying Yoga to Vecel. [React Hook "**" cannot be called at the top level].

[inc16sec]

I'm trying to deploy a Yoga Graphql to Vercel using Next Js.
With the Yoga server, I'm also using a plugin useGraphQLMiddleware. When running the server locally using npm run dev the server works as expected, but when trying to deploy it, and while the building process is ongoing this issue arises.

./pages/api/graphql.ts
--
15:41:14.733 | 113:5  Error: React Hook "useGraphQLMiddleware" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.  react-hooks/rules-of-hooks
15:41:14.733 |  
15:41:14.734 | info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
15:41:14.780 | Error: Command "npm run build" exited with 1

This is my graphql.ts:

import { createYoga } from 'graphql-yoga'
import { useGraphQLMiddleware } from '@envelop/graphql-middleware'
import type { NextApiRequest, NextApiResponse } from 'next'

//...More imports here, concerning auth and other stuff.
//...imported middlwares

export const config = {
    api: {
      // Disable body parsing (required for file uploads)
      bodyParser: false,
    },
  }

export default createYoga<{
  req: NextApiRequest
  res: NextApiResponse
}>({
    graphqlEndpoint: '/api/graphql',
    context: async ({request}) => { 
      const token = request?.headers?.get('Authorization')?.slice(7)
      return {
        jwt: token,
      }
    },
    schema: neoSchema.getSchema(),
    plugins: [
        useGraphQLMiddleware([middlewares])
    ],
})  

I know that this has something about calling a Hook outside a React function, but bear with me here, I really don't know how to solve this "Yoga and Next js" wise.

Any help would be much appreciated. Thank you and best regards.

[n1ru4l]

Hey @inc16sec,

You can disable this React-specific rule eslint rule via the following comment at the beginning of the file.

/* eslint-disable react-hooks/rules-of-hooks */

You can learn more about disabling eslint rules at https://eslint.org/docs/latest/user-guide/configuring/rules#disabling-rules

[inc16sec]

Works as expected. Thank you @n1ru4l for your response. It is much appreciated.