Estoy tratando de ejecutar mi API en un host local, pero cuando escribo npm run dev , la terminal muestra este mensaje de error.
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>Cuando miro en la consola Chrome Dev, dice crbug/1173575, los archivos del módulo que no son JS están en desuso. (anónimo) @ (índice):7290
[vite] Internal server error: Unable to parse {"file":"/index.html","line":9,"column":3}Aquí está mi archivo index.html a continuación
<!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>Aquí está mi archivo main.js
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();Creo que hay etiquetas body repetitivas que están causando problemas. Por favor verifique las líneas número 9 y 10.