javascript - El servidor de desarrollo de create-react-app no se actualiza automáticamente

Estoy siguiendo un tutorial sobre React usando create-react-app. La aplicación es creada por create-react-app v1.3.0

create-react-app my-app

El servidor de desarrollo es operado por

npm start

Después de cambiar el código varias veces, el navegador no se actualiza en vivo/recarga en caliente con los cambios. Refrescar el navegador no ayuda. Solo detener el servidor de desarrollo y reiniciarlo captura los nuevos cambios en el código.

Respuesta #1

Estaba leyendo muchas cosas innecesarias.

Estoy usando React 17.

Y mi problema era que la página solo añadía nuevos componentes, pero el navegador no estaba refrescando la página.

Si tu terminal está Compiling... y luego no ves cambios en el navegador, deberías intentar agregar un archivo .env en la ruta raíz del proyecto y agregar FAST_REFRESH=false.

La actualización en caliente fue reemplazada por la actualización rápida por defecto.

Respuesta #2

¿Has visto la sección "Solución de problemas" de la Guía del usuario?
Describe algunas causas comunes de este problema:

Cuando guardas un archivo mientras npm start se está ejecutando, el navegador debería refrescarse con el código actualizado.
Si esto no ocurre, intenta una de las siguientes soluciones:
Si tu proyecto está en una carpeta de Dropbox, intenta moverlo fuera.
Si el observador no ve un archivo llamado index.js y lo estás referenciando por el nombre de la carpeta, necesitas reiniciar el observador debido a un error de Webpack.
Algunos editores como Vim e IntelliJ tienen una función de "escritura segura" que actualmente rompe el observador. Necesitarás desactivarla. Sigue las instrucciones en "Deshabilitar la creación de archivos swap en vim".
Si la ruta de tu proyecto contiene paréntesis, intenta mover el proyecto a una ruta sin ellos. Esto es causado por un error del observador de Webpack.
En Linux y macOS, es posible que necesites ajustar la configuración del sistema para permitir más observadores.
Si el proyecto se ejecuta dentro de una máquina virtual como (una VirtualBox aprovisionada con Vagrant), crea un archivo .env en el directorio de tu proyecto si no existe, y agrega CHOKIDAR_USEPOLLING=true en él. Esto asegura que la próxima vez que ejecutes npm start, el observador use el modo de sondeo, según sea necesario dentro de una VM.
Si ninguna de estas soluciones ayuda, por favor deje un comentario en este hilo.

¡Espero que esto ayude!

Respuesta #3

Agregar un archivo .env en la ruta base del proyecto y dentro agregar FAST_REFRESH=false.

Esto desactiva la actualización rápida y vuelve a la recarga en caliente.

Si no quieres agregar un archivo .env a tu ruta base, puedes elegir estas opciones:

"start": "FAST_REFRESH=false react-scripts start", en el package.json.
FAST_REFRESH=false npm run start, en la línea de comandos.
FAST_REFRESH=false, exportándolo como una variable de entorno.

React 17
React-scripts 4

Respuesta #4

¿Has probado npm start con permisos de superusuario? Yo tuve el problema con mi proyecto y lo resolví de esta manera.

$sudo bash
#npm  start

Respuesta #5

En WSL2 funciona para mí, "Si el proyecto se ejecuta dentro de una máquina virtual como (una VirtualBox aprovisionada con Vagrant), crea un archivo .env en el directorio de tu proyecto si no existe, y agrega CHOKIDAR_USEPOLLING=true a él. Esto asegura que la próxima vez que ejecutes npm start, el observador use el modo de sondeo, según sea necesario dentro de una VM."

O simplemente ejecuta: $ CHOKIDAR_USEPOLLING=true npm start

Respuesta #6

Pasé unas pocas horas arreglando esto:

1. Crea un archivo .env (junto al archivo package.json) y agrega los siguientes contenidos:

Archivo: .env

FAST_REFRESH=false

2. Ahora, detén y arranca el servidor

(Ctrl + C to start, if in CMD, on Windows OS)
npm start

4. Ahora, cambia algo de texto en App.js

Archivo: App.js

from "Learn React"
to "Learn React And it's working"

NOTA:
1. El reinicio del servidor es importante.
2. Actualiza la pestaña del navegador si no ves los cambios.

Respuesta #7

En mi caso, era que no hay suficiente número de observadores de archivos. Tengo que cambiar las configuraciones manualmente.

Vea el límite de observadores de archivos activos usando el siguiente comando en la terminal.

cat /proc/sys/fs/inotify/max_user_watches

Agrega la siguiente línea al archivo /etc/sysctl.conf.

fs.inotify.max_user_watches = 524288

Aplica los cambios usando el comando de abajo.

sudo sysctl -p