Im trying to run my API over a localhost, but when I type npm run dev the terminal shows this error message.
7 | <title>MULTIPLE APIs</title>
8 | </head>
9 | <body>
| ^
10 | <body class="bg-gray-100">
11 | <h1 class= "text-bold text-6xl text center p-
8">Multiple API Feed</h1>
When I look in Chrome Dev console it says crbug/1173575, non-JS module files deprecated. (anonymous) @ (index):7290
[vite] Internal server error: Unable to parse {"file":"/index.html","line":9,"column":3}
Here is my index.html file below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml"
href="favicon.svg" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>MULTIPLE APIs</title>
</head>
<body>
<body class="bg-gray-100">
<h1 class= "text-bold text-6xl text center p-
8">Multiple API Feed</h1>
<div id ="app" class="min-h-screen flex flex-col
justify-center items-center gap-2"></div>
<script type="module" src="/main.js"></script>
</body>
</html>
Here is my main.js file
import './style.css';
const RAPIDAPI_KEY = import.meta.env.VITE_RAPIDAPI_KEY;
const LOVECALCULATOR_URL =
'https://love-
calculator.p.rapidapi.com/getPercentage';
const LOVECALCULATOR_HOST = 'love-
calculator.p.rapidapi.com';
const getData = async (url, host) => {
const response = await fetch(url, {
method: 'GET',
headers: {
accept: 'application/json',
'x-rapidapi-key': RAPIDAPI_KEY,
'x-rapidapi-host': host,
},
});
if (!response.ok) {
throw new Error(`HTTP error! status:
${response.status}`);
}
return await response.json();
};
const runApiQueries = async () => {
//GET MATCHMAKER RESULTS
const loveData = await getData(LOVECALCULATOR_URL,
LOVECALCULATOR_HOST);
console.log(loveData);
};
runApiQueries();
There are repetitive body tags that are causing problem I believe. Please check line number 9 and 10.