Nextjs Build fail on Vercel

Question

I'm trying to deploy my NextJs app (using GraphCMS) on Vercel. When I build the app on my computer it works fine, I can build and run the app locally but once I try to deploy the same exact app on Vercel it crash with this error

TypeError: Cannot read properties of undefined (reading 'document') at Object.parseRequestExtendedArgs (/vercel/path0/node_modules/graphql-request/dist/parseArgs.js:37:25) at /vercel/path0/node_modules/graphql-request/dist/index.js:422:42 at step (/vercel/path0/node_modules/graphql-request/dist/index.js:63:23) at Object.next (/vercel/path0/node_modules/graphql-request/dist/index.js:44:53) at /vercel/path0/node_modules/graphql-request/dist/index.js:38:71 at new Promise () at __awaiter (/vercel/path0/node_modules/graphql-request/dist/index.js:34:12) at request (/vercel/path0/node_modules/graphql-request/dist/index.js:418:12) at getPosts (/vercel/path0/.next/server/chunks/104.js:1143:82) at getStaticPaths (/vercel/path0/.next/server/pages/post/[slug].js:98:86) Build error occurred Error: Failed to collect page data for /post/[slug] at /vercel/path0/node_modules/next/dist/build/utils.js:959:15 at processTicksAndRejections (node:internal/process/task_queues:96:5) { type: 'Error' } error Command failed with exit code 1.

I don't understand where this is coming from.

pages/post/[slug].js

 
 

import React from "react";
import { useRouter } from "next/router";

import {
  PostDetail,
  Categories,
  PostWidget,
  Author,
  Comments,
  CommentsForm,
  Loader,
} from "../../components";
import { getPosts, getPostDetails } from "../../services";
import { AdjacentPosts } from "../../sections";

const PostDetails = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <Loader />;
  }

  return (
    <>
      <div className="container mx-auto px-10 mb-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
          <div className="col-span-1 lg:col-span-8">
            <PostDetail post={post} />
            <Author author={post.author} />
            <AdjacentPosts slug={post.slug} createdAt={post.createdAt} />
            <CommentsForm slug={post.slug} />
            <Comments slug={post.slug} />
          </div>
          <div className="col-span-1 lg:col-span-4">
            <div className="relative lg:sticky top-8">
              <PostWidget
                slug={post.slug}
                categories={post.categories.map((category) => category.slug)}
              />
              <Categories />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
export default PostDetails;

// Fetch data at build time
export async function getStaticProps({ params }) {
  const data = await getPostDetails(params.slug);
  return {
    props: {
      post: data,
    },
  };
}

// Specify dynamic routes to pre-render pages based on data.
// The HTML is generated at build time and will be reused on each request.
export async function getStaticPaths() {
  const posts = await getPosts();

  return {
    paths: posts.map(({ node: { slug } }) => ({ params: { slug } })),
    fallback: false,
  };
}

 
 
here is the Graphql query getPosts

 
 

export const getPosts = async () => {
  const query = gql`
    query MyQuery {
      postsConnection {
        edges {
          cursor
          node {
            author {
              bio
              name
              id
              photo {
                url
              }
            }
            createdAt
            slug
            title
            excerpt
            displayedDate
            featuredImage {
              url
            }
            categories {
              name
              slug
            }
          }
        }
      }
    }
  `;

  const result = await request(graphqlAPI, query);

  return result.postsConnection.edges;
};

 
 

 
   getPostDetails



 

export const getPostDetails = async (slug) => {
  const query = gql`
    query GetPostDetails($slug: String!) {
      post(where: { slug: $slug }) {
        title
        excerpt
        featuredImage {
          url
          id
        }
        author {
          name
          bio
          photo {
            url
          }
        }
        createdAt
        slug
        content {
          raw
        }
        categories {
          name
          slug
        }
        displayedDate
      }
    }
  `;

  const result = await request(graphqlAPI, query, { slug });

  return result.post;
};

 
 

I really don't understand why I can build it locally but not en Vercel, Thanks

Tried to modify queries, turn off fallback and others things that did not work