Hi, You might have a some data that is not handled properly. You might wanna try to build the repo using npm run build to see if you have the same issue or if it is on the upload to Vercel that the problem is.

^ do that first. Also your dependencies aren't pinned meaning when pushing to vercel something can break.

Not always a issue, but sometimes it can be.

Make sure to check for undefined data. If it deploys successfully but gives this error on runtime, then try checking the vercel logs for more info

Hey, @Clown , What do you mean by dependencies aren't pinned ?

Basically those "^" in the start of the dependency versions.

Im not sure vercel keeps a lockfile (it most likely doesn't, from what ik)

so should i remove the "^" ? and yep i will check the data handling part.

Try checking vercel logs to identify the problem.

As for the dependencies I'm honestly not sure how good of a idea it is to pin them. I was just telling you that could be the case

Thx, didn't know it's called like this

well the wierd part of the logs is that those dont really show me anything

according to the logs everything is fine

the data part seem to me to be the problem cuz si jsut some parts of the app that crashes

I personaly always use the 'pin'. meaning it will install the latest major version if i remember well..

It might be a TS error. Adding a ?. at the right place might solve it. Or doing a proper conditional or try catch handling...

If you have dynamic routes or some data fetching, maybe that's around there..

will check that too, thanks guys

i just added a try catch and throw error, but still getting the error also im logging the data and is there, by any chance could be that maybe MUI is the one causing the error ?

here is the data

Can you share the code for this file cliente-f5....js (if it fits in the message range) ? or the link to the file in the repo ?

thats the code

from the code I see it could be :
- because you set hidrateUserProjects as an empty array

   const [hidrateUserProjects, setHidrateUserProjects] = useState<ProjectType[]>([])

and then you make a use effect to set it to const projects = useProjectsStore((state) => state.projects)
the .length from

 <ProfileTitles
                  withProjects={hidrateUserProjects?.length > 0}
               />

But it the statement should return false and underfined shouldn't be triggered as you have in the console. but never knows....

I would try either :

 <ProfileTitles
                  withProjects={hidrateUserProjects && hidrateUserProjects?.length > 0}
               />

Or not using an effect since you are getting your data from the store, why not using them directly ?

   const user = useLoginStore((state) => state.user)
   const projects = useProjectsStore((state) => state.projects)

//.....

<ProfileTitles
                  withProjects={projects && projects.length > 0}
               />

Because in your case you are first hydrating the page, fetching the store, then rerendering the component from the useEffect

  useEffect(() => {
      setHidrateUserData(user)
      setHidrateUserProjects(projects)
   }, [user, projects])

Its the first thing i am seeing when looking at your code.

if you wanna stick with the useEffect and using a local state you might want to wrap some part of the concerned code with a statement like :

{!hidrateUserProjects ? <p>your loading logic or UI</p> : <>//.. the actual code</>}
// or
<Supsense fallback={<p>your loading logic or UI</p>}><>//.. the actual code</></Suspense>

Also if I can advise, I would refactor the ProjectCard so I don't have to pass all those props :

 <ProjectCard
        key={index}
        balance={project?.balance}
        dream={project?.dream}
        project_id={project?.project_id}
        fee_rate={project?.fee_rate}
        capital={project?.capital}
        months={project?.months}
        monthly_payment={project?.monthly_payment}
        selling={project?.selling}
        userType={user.userType}
        onClick={() =>handleCard(project?.project_id)}
      />

// rather something like 
<ProjectCard
       key={index}
       project{project}
       userType={user.userType}
       onClick={() => handleCard(project_id}
  />

// And I would extract the handleCard(project?.project_id) into a useCallback, wich is recommanded when you drill methods through components to avoid weird behavior and unnecessary rerendering.
const handleCard = (id:IDType) => useCallback(() => {
      return  //.. your logic here
        },[])

And I would destructure the willing props from the ProjectCard itself... but it is not related to the topic though

i had issues with the hydration process of the page, basically had to put it in the effect there, I havent thought on the suspense.

Thanks @Max Max for the tips yeah deffinitly will refactor somethings.