Laiba Riaz
Laiba Riaz

Reputation: 1

How to Fix "Cannot Read Properties of Undefined" and "Axios Error 500" in My Next.js AI LMS App?

I'm building a full-stack AI LMS app using Next.js with a stack that includes React, Tailwind CSS, Stripe for payments, Neon for the database, Clerk for authentication, and Gemini AI. I followed a video tutorial and managed to debug most of the issues I ran into with some trials and help from GPT. But I'm stuck on an error I can't figure out.

The error I'm getting is: TypeError: Cannot read properties of undefined (reading 'post') AxiosError: Request failed with status code 500

The error happens in the part of my code where I'm making a POST request to an API route:

const GenerateCourseOutline = async () => {
  const courseId = uuidv4();
  const result = await axios.post('/api/generate-course-outline', {
    courseId: courseId,
    ...formData,
    createdBy: user?.primaryEmailAddress?.emailAddress,
  });
  console.log(result);
};

I’ve tried a few things already. First, I checked whether user is undefined before accessing its properties, and it seems like user might actually be undefined, but I don’t know why. I also verified that formData is correctly populated, and it looks fine in the logs. I even tested the API route /api/generate-course-outline separately, and I’m getting a 500 error, but the cause isn’t clear to me. The courseId is being generated as expected, so I don’t think that’s an issue.

I’m using Clerk for authentication, I suspect the issue might be related to fetching the user data. At the same time, I’m not sure if the 500 error from the API route is due to something wrong with the request payload or the backend handling the request. Are there any common issues I should check for in this stack? Any debugging tips would also be really helpful.

Upvotes: 0

Views: 23

Answers (1)

zonbi inu
zonbi inu

Reputation: 35

  1. In this error TypeError: Cannot read properties of undefined (reading 'post') : according to the code, "post" is the property you trying to read from "axios", but axios isn't loaded successfully at that time, maybe GenerateCourseOutline is called too early. But the function is called again, depends on your logic, axios is already loaded and excuted, then come another error.
  2. AxiosError: Request failed with status code 500, more likey a backend error or joint issue. More info from the network in DevTools is needed.

Upvotes: 0

Related Questions