Im new to React and have created a Remix React app which calls a python hosted api backend to recieve a timestamp (for now).
The api call is successfull and there is full communication with the backend, however the problem is that once the data has been fetched it throws an “[vite] Internal server error: URI error”, which i cannot troubleshoot.
Step 1 -> go to http://localhost:5173/dashboards/external/AAA
Step 2 -> dashboards.external.$iata.tsx is displayed and a api call is made to my python made backend
Step 3 -> HTML is loaded but the terminal throws “[vite] Internal server error: URI error”
import { useParams } from "@remix-run/react";
import { json, LoaderFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import styles from '~/styles/spinner.css';
export function links() {
return [{ rel: "stylesheet", href: styles }];
}
type LoaderData = {
apiData: any;
};
export const loader: LoaderFunction = async ({ request }) => {
const url = new URL(request.url);
const iata = encodeURIComponent(url.pathname.split('/').pop() || '');
console.log(iata);
const currentDate = new Date();
const firstDayOfYear = new Date(currentDate.getFullYear(), 0, 1);
const timezoneOffset = -currentDate.getTimezoneOffset();
const headers = {
"ITS-API-Key": process.env.API_KEY || "",
"from": firstDayOfYear.toISOString(),
"to": currentDate.toISOString(),
"offset": timezoneOffset.toString()
};
let apiData = null;
const response = await fetch("http://localhost:5000/init", {
method: "GET",
headers: headers
});
const responseData = await response.text();
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
apiData = JSON.parse(responseData);
return json({ apiData});
};
function LoadingSpinner() {
return (
<div className="spinner">
Loading...
</div>
);
}
export default function ExternalDashboard() {
const { iata } = useParams();
const { apiData } = useLoaderData<LoaderData>();
return (
<div>
<h1>External Dashboard</h1>
<p>Current airport: {iata}</p>
</div>
);
}
I cant see why this URI error happens in the first place and it seems to be a vite related issue, the error stack doesnt print anything useful either.