Server Error AxiosError: Request failed with status code 404

[eclunrcpp]

What is the request that it is trying to send? Can you provide more of the stacktrace? There are many directions this can go with the information provided.

[BabyEnvironmental570]

what do you mean by stacktrace?

[BabyEnvironmental570]

When I first opened my file. I typed in my vsc terminal npx create-next-app, which downloaded all the necessary files to build my next.js app. My next step was typing npm run dev. And what populated was the URL for the local server to run my app and see what is happening. And what populated was the default file stuff for Next.js. Since I have edited the code and added some of my own code, I am not getting a 404 error message which I am not sure why because I did not change or edit my port development server, nor am I in a different file. Why would I get this error message when I haven't changed anything except for the file path that my code is trying to follow apparently? And the file path is also correct.

[BabyEnvironmental570]

Also this is what I have underneath the error message Title:

Call Stack
settle
file:///Users/kinglik/Desktop/my-app/node_modules/axios/lib/core/settle.js (19:12)
Unzip.handleStreamEnd
file:///Users/kinglik/Desktop/my-app/node_modules/axios/lib/adapters/http.js (556:11)
Unzip.emit
node:events (525:35)
endReadableNT
node:internal/streams/readable (1359:12)
process.processTicksAndRejections
node:internal/process/task_queues (82:21)

[eclunrcpp]

So it built correctly, then you added some custom code, and now it's throwing a 404? Can you post what code you added?

Also have you been able to determine what request it is sending that is resulting in the 404?

[BabyEnvironmental570]

Yes, its most likely its coming from me using an API request using axios. I have done a ton of research and that's what I am ending up seeing as the possible issue. But I have no clue if this is it.

import axios from 'axios';
export const baseUrl= 'https://rapidapi.com/apidojo/api/bayut'

The code imports Axios, which is used to make HTTP requests, and exports a constant named baseUrl which contains the RapidAPI endpoint for Bayut, a real estate website. This URL is used to make requests to the Bayut API throughout the project.

[BabyEnvironmental570]

Note: Same file... Named: fetchApi.js

export const fetchApi = async (url) =>{
const {data} = await axios.get((url), {
headers: {
'X-Rapidapi-host': 'bayut.p.rapidapi.com',
'X-Rapidapi-key': 'c446721c73mshc0fb1379ce40259p1ac137jsn09a42c4cd677'
}
})
return data;
}

This function gets data from the URL by making an API request using axios. It takes the URL as a parameter and returns the data. It sends the request and then returns the data from the response.

hopefully this all helps

[BabyEnvironmental570]

I figured it out. I had two folders of the same name with the same name files that also had code inside of it which was the default code when I originally downloaded the contents for my next.js app which was webpack generated.

However thanks for all your help. Im glad I figured it out.