Errors during the build process on vercel

TypeError: Cannot read properties of null (reading 'useEffect')
    at exports.useEffect (/vercel/path0/node_modules/react/cjs/react.production.min.js:24:292)
    at QueryClientProvider (file:///vercel/path0/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:46:9)

TypeError: Cannot read properties of null (reading 'useEffect')
    at exports.useEffect (/vercel/path0/node_modules/react/cjs/react.production.min.js:24:292)
    at QueryClientProvider (file:///vercel/path0/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:46:9)

The error you're encountering seems to be related to the server-side rendering of the React application. It appears that the useEffect hook is being called on the server-side, which is not supported, as React hooks are intended for client-side rendering only.

To resolve this issue, you can try using the next/dynamic package to dynamically import the QueryClientProvider component, which will defer its rendering to the client-side:

Import the next/dynamic package and use it to dynamically import the QueryClientProvider component:

import React from 'react';
import { QueryClient } from '@tanstack/react-query';
import dynamic from 'next/dynamic';

const queryClient = new QueryClient();

const DynamicQueryClientProvider = dynamic(
  () =>
    import('@tanstack/react-query').then((mod) => mod.QueryClientProvider),
  { ssr: false }
);

export default function MyApp({ Component, pageProps }) {
  return (
    <DynamicQueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </DynamicQueryClientProvider>
  );
}

The error you're encountering seems to be related to the server-side rendering of the React application. It appears that the useEffect hook is being called on the server-side, which is not supported, as React hooks are intended for client-side rendering only.

To resolve this issue, you can try using the next/dynamic package to dynamically import the QueryClientProvider component, which will defer its rendering to the client-side:

Import the next/dynamic package and use it to dynamically import the QueryClientProvider component:

import React from 'react';
import { QueryClient } from '@tanstack/react-query';
import dynamic from 'next/dynamic';

const queryClient = new QueryClient();

const DynamicQueryClientProvider = dynamic(
  () =>
    import('@tanstack/react-query').then((mod) => mod.QueryClientProvider),
  { ssr: false }
);

export default function MyApp({ Component, pageProps }) {
  return (
    <DynamicQueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </DynamicQueryClientProvider>
  );
}