web-dev-qa-db-fra.com

React create app hot rechargement ne fonctionne pas toujours sous linux

J'ai créé une application React en utilisant le passe-partout create-react-app, qui semble être très populaire, recharger à chaud parfois des mises à jour lorsque l'un des fichiers change et parfois non, il semble qu'il y ait une durée minimale ou quelque chose comme ça, je '' m en utilisant Ubuntu, noeud version 7.0, le script dans package.json est npm:'react-script start' ce qui me manque?

node.jslinuxreactjscreate-react-app
21
challenger

Lorsque npm start ne détecte pas les modifications, voici les étapes de dépannage courantes fournies dans le create-react-app documentation - lien .

Lorsqu'une application est en cours d'exécution avec npm start et la mise à jour du code dans l'éditeur devrait éventuellement rafraîchir l'ennuyeuse avec le code mis à jour. Si cela ne se produit pas, essayez l'une des solutions de contournement suivantes:

  1. Si les fichiers du projet sont directement synchronisés avec votre système local à partir d'un stockage cloud comme Dropbox ou Google Drive et que vous essayez d'exécuter l'application directement, essayez de la déplacer.
  2. En raison du bogue Webpack, vous pouvez devez redémarrer l'observateur . Si l'observateur ne détecte pas le fichier index.js et que vous le référencez par le nom du dossier.
  3. La fonction d'écriture sécurisée dans des éditeurs comme Vim et IntelliJ brise actuellement l'observateur. Vous devrez le désactiver .
  4. En raison de bogue de l'observateur Webpack , les projets dont le chemin contient des parenthèses provoquent un problème, essayez de déplacer le projet vers un chemin sans eux. .
  5. Pour autoriser davantage d'observateurs sous Linux et macOS, vous devrez peut-être Tweak system settings .
  6. Si le projet s'exécute à l'intérieur d'une machine virtuelle telle que (un Vagrant provisionné) VirtualBox, créez un .env fichier dans votre répertoire de projet s'il n'existe pas, et ajoutez CHOKIDAR_USEPOLLING=true à elle. Cela garantit que la prochaine fois que vous exécuterez npm start, l'observateur utilise le mode d'interrogation, si nécessaire dans une machine virtuelle.
  7. Pourrait essayer d'augmenter max_users_watches- lien

Plus de références:

19
Keshan Nageswaran

Essayez-les:

  • Désactivez l'écriture sécurisée dans votre IDE
  • Augmenter max_user_watches
  • Votre chemin ne doit pas avoir de parenthèses

en dernier recours, essayez de l'utiliser comme variable env: CHOKIDAR_USEPOLLING=true npm start

Sources: https://github.com/facebookincubator/create-react-app/issues/659https://github.com/facebookincubator/create-react-app/issues/ 1049 # issuecomment-261731734

5
Lukáš Gibo Vaic

J'ai pu faire ce travail en utilisant:

Sudo npm start
2
the_dangoria

essayez de supprimer le dossier node_modules et réinstallez à l'aide de cmd npm install

travaillé pour moi (ubuntu 18.04.3 LTS)

0
yasir jafar

Apparemment, le rechargement de module à chaud ne fonctionne que si vous éjectez votre application .

Mais si vous n'avez pas éjecté votre application, vous pouvez suivre ces instructions pour la faire fonctionner.

Recherchez la ReactDOM.render(...) en haut de votre application et ajoutez ces lignes en dessous:

ReactDOM.render(...);

if (module.hot) {
  module.hot.accept('./App', () => {
    // --- Copy-paste your usual ReactDOM.render(...) call here: --- //
    ReactDOM.render(...);
  });
}

Les instructions liées ci-dessus montrent également comment recharger à chaud des éléments en dehors de l'arborescence des composants, tels que les réducteurs redux.

0
joeytwiddle

Dans nbunt, je tue fondamentalement tout le processus en cours d'exécution sur le port (par défaut, l'application de réaction est: 3000).

Liste tous les processus en cours d'exécution sur le port 3000.

lsof -i :3000

Cette commande affichera quelque chose comme ça.

COMMAND   PID USER   FD   TYPE  DEVICE SIZE/OFF NODE NAME
node     7429 yipl   19u  IPv4 1081760      0t0  TCP localhost:3000->localhost:35762 (ESTABLISHED)
chrome  26448 yipl  177u  IPv4 1080082      0t0  TCP localhost:35762->localhost:3000 (ESTABLISHED)

Maintenant, tuez le processus par PID.

kill -9 7429
kill -9 26488

Redémarrez votre application React.

0
Bimal Grg

exécutez cette commande

Sudo -i
echo 1048576 > /proc/sys/fs/inotify/max_user_watches
exit
0
brian bentancourt

Un cas supplémentaire que je viens de rencontrer concerne l'utilisation de plusieurs versions de nodejs avec NVM en parallèle. Fondamentalement, j'ai deux fenêtres de terminal, une exécutez le nœud 10.x, l'autre sur le nœud 9.x, et Webpack watcher cesse de voir le changement.

La solution consiste à apporter les deux à la même version de nœud

0
Trung Tín Trần