1

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: introducir la descripción de la imagen aquí

También me doy cuenta de que en las peticiones se recibe el fichero javascript como si fuera html Señalo la fila en color rojo

Muchas gracias de antemano

3
  • ¿Estás usando create-react-app? Saludos
    – g.4
    el 6 feb. 2021 a las 19:28
  • 1
    Te falta cerrar el div donde muestras "Hola mundo"
    – Isaac
    el 7 feb. 2021 a las 3:34
  • Si estoy utilizando create-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
    – ragolo
    el 7 feb. 2021 a las 17:57

1 respuesta 1

0

Intenta modificando la url, ambas formas en el siguiente ejemplo funcionan, pero usar la variable global process.env.PUBLIC_URL es recomendado :

function App() {
  //useScript("assets/pruebas/test.js");
  useScript(process.env.PUBLIC_URL + "assets/pruebas/test.js");
  return (
    <div>
      Hola mundo
    </div>
  );
}

Parece ser que estás experimentando, sería bueno revisar esta publicación, puede haber implicaciones con el bundle, al usar archivos que esten fuera del folder src.

Espero que esta respuesta sea de ayuda.

2
  • Muchas gracias, me funciona de esa manera.
    – ragolo
    el 8 feb. 2021 a las 15:03
  • @ragolo, me parece interesante como estas comunicándote con el archivo JS, si consideras que la respuesta fue de utilidad, no olvides votar y aceptarla, esto ayuda a que otros usuarios puedan usar esta información como referencia, saludos.
    – g.4
    el 8 feb. 2021 a las 16:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.