Estoy tratando de incluir un script en una aplicación de React, sin embargo me da un error de tipo Uncaught SyntaxError: expected expression, got '<'. Ya he buscado y hay varias opciones relacionadas con cambiar el tipo MIME, pero lamentablemente parece ser que algo no estoy entendiendo porque no me funcionan. Para incluir el javascript de forma dinámica he creado un hook con la siguiente estructura:
import { useEffect } from "react";
const useScript = (url) => {
useEffect(() => {
const script = document.createElement("script");
script.src = url;
script.async = true;
script.type = "text/javascript";
script.onload = () => {
console.log("estoy cargando script " + url);
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, [url]);
};
export default useScript;
En este caso a manera de prueba creo un archivo .js que debe mostrarme un mensaje por consola. El archivo solo tiene la siguientes líneas de código
console.log("Estoy leyendo archivo");
Mi app principal tiene la siguiente estructura:
import React from "react";
import useScript from "./hooks/useScript";
export default function App() {
useScript("public/assets/pruebas/test.js");
return (
<div>
Hola mundo
</div>
);
}
La primera parte funciona porque por la consola veo el mensaje de confirmación, de que sí, se está cargando el script, pero nunca veo se está leyendo el script.
Esta es la imagen de la consola:
También me doy cuenta de que en las peticiones se recibe el fichero javascript como si fuera html
Muchas gracias de antemano
create-react-app
? Saludoscreate-react-app
. Y si, tambien hay un error en la transcripción del código. Lo arreglo enseguida, pero no afecta la situación inicial. Gracias