0
154
Views¿Por qué mi archivo JS externo no se carga en ReactJS?
Por mi vida, no puedo entender por qué este archivo JS externo no se está cargando. Intenté todas las preguntas de ayuda que existen y todavía no funciona, así que tal vez alguien más pueda ver lo que yo no puedo.
Así que estoy trabajando en un proyecto ReactJS y estoy tratando de vincular un archivo JS externo.
Aquí está la estructura del archivo: 
El archivo javascript externo está en public/js/script.js .
He probado todos los métodos que he encontrado para que funcione.
Lo he vinculado en index.html de la siguiente manera:
<script src="./js/script.js" type="text/jsx"></script>He agregado lo siguiente a mi componente principal de la aplicación:
componentDidMount() { const script = document.createElement('script'); let url = '../public/js/script.js' script.src = url; //(This is external js url) script.async = true; document.body.appendChild(script); }He agregado esto en el componente funcional donde realmente necesito que funcione el javascript externo:
useEffect(() => { const script = document.createElement('script'); script.src = '../public/js/script.js'; //(This is external js url) script.async = true; document.body.appendChild(script); }, [])Y, sin embargo, no importa ninguno de estos intentos, nada parece hacer que el archivo funcione.
Estoy ejecutando el proyecto en localhost, por lo que no estoy seguro de si hay algún problema. Solo me gustaría descubrir cómo hacer que los archivos javascript externos funcionen. He intentado usar Helmet.
No sé qué estoy haciendo mal. De todos modos, agradezco cualquier ayuda que pueda obtener tratando de resolver esto.
Editar: ajusté lo siguiente: src="./js/script.js a src="js/script.js en la etiqueta <script> y tampoco tuvo ningún efecto. Todavía en busca de una solución.
3 answers
Answer question0
Código original:
<script src="./js/script.js" type="text/jsx"></script>Código modificado: (cambiado a directorio relativo)
<script src="js/script.js" type="text/jsx"></script>0
Coloque /js/script.js dentro de la carpeta pública, luego agregue esta línea entre la etiqueta head . (sin prefijo de punto)
Si coloca debajo de la etiqueta del body , esta línea se sobrescribirá cuando React comience a representar elementos.
<script src="/js/script.js" type="text/jsx"></script>O, de otra manera; intenta cambiar esta línea:
let url = '../public/js/script.js'
a:
let url = `${process.env.PUBLIC_URL}/js/script.js`
0
Esta solucion funciono para mi
- Utilicé el gancho useEffect dentro de un componente de función (antes del retorno). Esto se puede usar dentro de App.js también antes de la devolución. Nota: si desea hacer esto dentro de una clase que extiende
React.component, entonces necesita usarcomponentDidMount()(antes de renderizar), esto es necesario ya que los ganchos funcionan dentro de un componente de función o solo ganchos personalizados. - En el encabezado, agregue una etiqueta de secuencia de comandos
Pequeño fragmento del código:
import React, from "react"; React.useEffect(() => { const LoadExternalScript = () => { const externalScript = document.createElement("script"); externalScript.onerror = loadError; externalScript.id = "external"; externalScript.async = true; externalScript.type = "text/javascript"; externalScript.setAttribute("crossorigin", "anonymous"); document.body.appendChild(externalScript); externalScript.src = './script.js'; }; LoadExternalScript(); return () => { // document.body.removeChild(externalScript); }; }, []);Encontrará este enlace útil si obtiene un error de sintaxis:
"Error de sintaxis no detectado: token inesperado < en React" Solución de error de sintaxis