Application error: a client-side exception has occurred (see the browser console for more information). Digest: 3304712560

[nullmicgo]

after deploy to vercel , it has the following error. Application error: a client-side exception has occurred (see the browser console for more information). Digest: 3304712560

from the console. it said "Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error. window.console.error @ 769-39f2b976c694cbdf.js:1"

[lazarevkristijan]

Trying to figure it out rn

[mdamapong]

@nullmicgo did you figure it out? I'm running into the same error.

[Rishika-1603]

Same error...any update?

[amanmukati09]

Same issue here as well

[Ondrej89]

@nullmicgo @lazarevkristijan @mdamapong @Rishika-1603 @amanmukati09 is there any update to this issue? could it be something wrong with nextjs update?

[DSanchez-ai]

Same issue here

[lazarevkristijan]

@nullmicgo @lazarevkristijan @mdamapong @Rishika-1603 @amanmukati09 is there any update to this issue? could it be something wrong with nextjs update?

Hey I realized my error was a server side one, I see all of you are getting a client side error

[Ondrej89]

@nullmicgo @lazarevkristijan @mdamapong @Rishika-1603 @amanmukati09 is there any update to this issue? could it be something wrong with nextjs update?

Hey I realized my error was a server side one, I see all of you are getting a client side error

sooo what did you do to fiz your error, so we haw it documented hear if same thing happened to someone else :)

[lazarevkristijan]

@nullmicgo @lazarevkristijan @mdamapong @Rishika-1603 @amanmukati09 is there any update to this issue? could it be something wrong with nextjs update?

Hey I realized my error was a server side one, I see all of you are getting a client side error

sooo what did you do to fiz your error, so we haw it documented hear if same thing happened to someone else :)

Thought I had it fixed i started on a new project. Ugh I just wonder if we always mess up something or is it the code being outdated itself

[Ondrej89]

@nullmicgo @lazarevkristijan @mdamapong @Rishika-1603 @amanmukati09 is there any update to this issue? could it be something wrong with nextjs update?

Hey I realized my error was a server side one, I see all of you are getting a client side error

sooo what did you do to fiz your error, so we haw it documented hear if same thing happened to someone else :)

Thought I had it fixed i started on a new project. Ugh I just wonder if we always mess up something or is it the code being outdated itself

I am wondering that too but 2 weeks is short time to be outdated.. I saw people complaining 1 week before that something is wrong and my troubles started at the same time ...

[lazarevkristijan]

Adrian makes the best tutorials and projects but i don't see any after support for when we have problems haha

[Ondrej89]

Adrian makes the best tutorials and projects but i don't see any after support for when we have problems haha

Yeah some support would be nice, I checked his discord and I saw lots of post about this and other errors but no solutions :( I'm giving it one more go of writing it as grafbase project if not it will have static data like Navlinks and footer that has :)

[Rishika-1603]

@nullmicgo @lazarevkristijan @mdamapong @Rishika-1603 @amanmukati09 is there any update to this issue? could it be something wrong with nextjs update?

Naah... I tried reaching out to Adrian too but he ain't responding

[frederick-bruce]

not sure if this issue is related but my issue was the server thought there was no object so it returned null even though there were projects (recipes in my case).

the validCategory variable checks if 'category' is null and assigns an empty string as the default value

[mdamapong]

not sure if this issue is related but my issue was the server thought there was no object so it returned null even though there were projects (recipes in my case).

the validCategory variable checks if 'category' is null and assigns an empty string as the default value

@nullmicgo @Ondrej89 @amanmukati09

Check action.ts

export const fetchAllProjects = (
    category?: string | null,
    endcursor?: string | null
) => {
    client.setHeader("x-api-key", apiKey);

    const validCategory = category ?? ''

    return makeGraphQLRequest(projectsQuery, { category: validCategory, endcursor });
};

This fix my issue and on to the next issue Oauth!!

[Ondrej89]

export const fetchAllProjects = ( category?: string | null, endcursor?: string | null ) => { client.setHeader("x-api-key", apiKey);

const validCategory = category ?? ''

return makeGraphQLRequest(projectsQuery, { category: validCategory, endcursor }); };

You sir are a Legend!!

[Rishika-1603]

not sure if this issue is related but my issue was the server thought there was no object so it returned null even though there were projects (recipes in my case).

the validCategory variable checks if 'category' is null and assigns an empty string as the default value

I dont know how to thank you enough, I spent so much time in this project but it was all waste because I was unable to deploy it. Now its working. Thank you so much. Yours was a god sent comment ❤️

[kmorales13]

The previously mentioned fix works but using an empty string for the category filter seems to return no values. So my homepage was empty unless I selected a category.

I instead opted for having two queries, one for when there's a selected category and one without:

/// graphql/index.ts

export const projectsQueryAll = `
  query getProjects($endcursor: String) {
    projectSearch(first: 8, after: $endcursor) {
     ...
    }
  }
`;

export const projectsQueryWithFilter = `
  query getProjects($category: String, $endcursor: String) {
    projectSearch(first: 8, after: $endcursor, filter: {category: {eq: $category}}) {
      ...
    }
  }
`;

/// lib/actions.ts

if (category) {
  return makeGraphQLRequest(projectsQueryWithFilter, { category, endcursor });
}

return makeGraphQLRequest(projectsQueryAll, { endcursor });

[ProgrammerOwais]

I have solved the issue guys check it out. , here is how first you will need to create two queries one for all projects without category option `` export const projectsQueryAll = query getProjects( $endcursor: String) { projectSearch(first: 8, after: $endcursor) { pageInfo { hasNextPage hasPreviousPage startCursor endCursor } .... .... }

and one with category filter

export const projectsQueryWithFilter = ` query getProjects($category: String, $endcursor: String) { projectSearch(first: 8, after: $endcursor, filter: {category: {eq: $category}}) { pageInfo { hasNextPage hasPreviousPage startCursor endCursor } ..... .... }

and then in the action.ts you have to change the code like this in the screen shot

Also the most important, make sure to check all the environment variables , in development, in grafbase & in production
I hope you all will find this helpful,
have a great day.