es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error de secuencia de comandos al servir la aplicación de React desde un subdirectorio.

11 Jul, 2023 Programación

Estoy tratando de servir una aplicación de React (creada usando craco) desde un subdirectorio (https://my-domain/app). Siguiendo los pasos de esta guía, y modificando la configuración de nginx en la ubicación /app, obtengo el contenido estático, pero algunos fragmentos generan el siguiente error en Chrome:

Uncaught SyntaxError: Unexpected token ‘<‘ … main.b5d3f270.chunk.js:1

Investigando, noté que nginx devuelve una página html en lugar de código javascript puro, y el < incorrecto es (probablemente) el inicio de :

<!doctype html>
<html lang="en">

<head>
   ...
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
...
<script>
    !function...
</script
</body>

Esto solo sucede cuando sirvo la aplicación desde el subdirectorio.

¿Alguna idea de cuál es el problema?

Se puede encontrar una pregunta similar sin respuesta aquí.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema se debe a que el archivo index.html generado por craco incluye rutas absolutas para las etiquetas de script y hojas de estilo. Al servir la aplicación desde un subdirectorio, estas rutas deben ajustarse para incluir también la ruta del subdirectorio.

    Para solucionar esto, puedes modificar el campo homepage en tu archivo package.json para incluir la ruta del subdirectorio:

    {
  "homepage": "https://mi-dominio/app",
  // otras configuraciones del package.json
}

    Luego, reconstruye tu aplicación usando craco:

    npm run build

    Esto generará un nuevo archivo index.html con las rutas correctas.

    A continuación, actualiza tu archivo de configuración de nginx para servir la aplicación desde la ruta del subdirectorio, incluyendo el bloque de location modificado:

    location /app {
  alias /ruta/al/directorio/de/build;
  index index.html;
  try_files $uri $uri/ /app/index.html;
}

    Ten en cuenta que la directiva try_files se ha actualizado para incluir la ruta del subdirectorio.

    Con estos cambios implementados, tu aplicación debería ser servida correctamente desde la ruta del subdirectorio, sin que se devuelvan páginas HTML inesperadas.

Comments are closed.