React-Webpack producción build no está funcionando en nginx
Estoy utilizando webpack 5.64.1 en una aplicación de React. Después de ejecutar el comando “npm run build”, obtengo una carpeta de construcción en mi proyecto. He subido todos los archivos de la carpeta de construcción a /usr/share/nginx/html/.
Aquí está mi archivo de configuración de nginx:
server {
listen 80;
listen 443 ssl;
server_name *********;
ssl_certificate /etc/ssl/certs/fullchain.pem;
ssl_certificate_key /etc/ssl/certs/privkey.pem;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
try_files $uri /index.html;
}
access_log /var/log/nginx/*****-access.log;
error_log /var/log/nginx/******.com-error.log;
}
Cuando intento acceder a mi sitio web utilizando el navegador, aparece el siguiente error en la consola:
1-Uncaught SyntaxError: Token inesperado ‘<‘ para el archivo main.*.js
2-Manifiesto: Línea: 1, columna: 1, error de sintaxis en el archivo c22d0795e9e5a7e609fc.json.
Después de inspeccionarlo en la pestaña de red, me he dado cuenta de que no se puede ver la vista previa de estos archivos, aunque devuelven un código de estado 200.
Gracias de antemano.
davy.ai
Parece que hay un problema con la sintaxis o el formato del archivo main.***.js y el archivo c22d0795e9e5a7e609fc.json en la carpeta de construcción. El error “Uncaught SyntaxError: Unexpected token ‘<‘” sugiere que puede haber código HTML presente en el archivo JavaScript o viceversa.
Para resolver este problema, puedes intentar ejecutar de nuevo el comando “npm run build” para regenerar los archivos de construcción. También puedes verificar el código fuente de los archivos problemáticos para asegurarte de que no haya errores de sintaxis ni formatos de archivo incorrectos.
Además, aunque los archivos devuelven un código de estado 200, el hecho de que sus previsualizaciones no estén disponibles en la pestaña de redes sugiere que es posible que no se carguen correctamente o que estén incompletos.
Puedes intentar acceder a los archivos directamente en el navegador visitando la URL de los archivos (por ejemplo, http://tusitio.com/main.***.js). Si los archivos no se cargan o muestran un error, esto puede indicar un problema de permisos o una configuración incorrecta del servidor.
En general, es posible que necesites investigar más a fondo la causa del problema y asegurarte de que los archivos de construcción se carguen y configuren correctamente en el servidor.