Impossible de charger le script Assurez-vous que vous exécutez un serveur Metro ou que votre bundle 'index.android.bundle' est correctement emballé pour la publication


161

react-native run-androidLa commande se termine en laissant un message dans le simulateur Android. Le message est le suivant:

Impossible de charger le script Assurez-vous que vous exécutez un serveur Metro ou que votre bundle «index.android.bundle» est correctement emballé pour la publication.

Capture d'écran

Qu'est-ce que je fais mal?


pouvez-vous essayer ce lien stackoverflow.com/questions/32572399/... ?
errorau

5
J'ai le même problème car mon appareil n'est pas connecté à Internet.
Huo Chhunleng

Cette erreur arrive: throw er; // Événement 'erreur' non géré
Saeed

Je l'ai trouvé et je l'ai posé stackoverflow.com/a/58570426/6852210
Alireza

@Belle Solution, avez-vous trouvé une solution?
Hitesh le

Réponses:


96

Vous n'avez pas encore démarré le bundler. Exécutez npm startou react-native startdans le répertoire racine de votre projet avant react-native run-android.


je lance d'abord react-native start mais lors de l'exécution de react-native run-android, il se termine après la construction réussie
Belle Solutions

12
Vous devez avoir une console à 2 nœuds exécutée simultanément. L'un démarre et exécute le bundler, l'autre exécute l'émulateur.
Nerdragen

27
Pour moi, cette erreur apparaît même si le bundler est démarré.
P.Lorand

2
Assurez-vous que le port 8081 n'est pas bloqué. Assurez-vous également d'utiliser un terminal pour démarrer le bundler, attendez qu'il ait fini de charger le graphique de dépendances, puis exécutez react-native run-android sur un autre terminal.
Nerdragen

1
Sous Windows, il fonctionne tout seul, mais pas sous Linux, merci! Travaillez parfaitement!
Adrian Serna

62

Ces étapes m'aident vraiment:

Étape 1: Créez un répertoire dans android / app / src / main / assets

Commande Linux :mkdir android/app/src/main/assets

Étape 2: Renommez index.android.js(dans le répertoire racine) en index.js( Peut-être qu'il y a un index.jsfichier auquel cas vous n'avez pas besoin de le renommer ) puis exécutez la commande suivante:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Étape 3: Créez votre APK:react-native run-android

Veuillez utiliser index.js dans la dernière version.

Prendre plaisir :)


Quel est l'emplacement de ce fichier dans react native project index.android.j
Arbaz.in

@ Arbaz.in dans le répertoire racine.
Saeed le

@ Arbaz.in Peut-être qu'il y a un index.jsfichier dans le répertoire racine, auquel cas vous n'avez pas besoin de le renommer
Saeed le

@Saeed oui trouvé
Arbaz.in

4
Cela ne peut exécuter l'application que pour le moment, mais comment cela permettra-t-il le débogage et le chargement à chaud? ce n'est pas la solution parfaite pour y parvenir.
buddhiv le

39

Pour moi, cette erreur a été causée par une mise à niveau de react-native

À partir d'Android 9.0 (niveau d'API 28), la prise en charge du texte clair est désactivée par défaut.

Si vous consultez le diff de mise à niveau, vous devez créer un manifeste de débogage android/app/src/debug/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

Voir pour plus d'informations: https://stackoverflow.com/a/50834600/1713216

https://react-native-community.github.io/upgrade-helper/


1
A travaillé pour moi sur RN 0.61.3.
Żabojad

2
Malheureusement, cela n'a pas fonctionné pour moi. J'avais déjà cela et j'obtiens toujours la même erreur, même si le Metro Bundler est en cours d'exécution.
Andrew

J'ai trouvé que j'ai parfois besoin de remplacements supplémentaires si j'ai défini un networkSecurityConfig, il semble que ces paramètres soient toujours à l'origine des problèmes pour moi. Vous pouvez essayer de supprimer toute configuration de sécurité et spécifier android:usesCleartextTraffic="true"dans le menu principal AndroidManifest.xmlsi cela fonctionne?
Tom

Cela a fonctionné pour moi sur RN 0.62
KevinAdu

J'ai tous ces paramètres, y compris Android: usesCleartextTraffic = "true", mais je ne peux toujours pas exécuter l'application sur un appareil réel.
Lucky_girl

18

Vous pouvez essayer ce qui suit:

Ajoutez cette ligne sur votre AndroidManifest.xml

<application
[...]
android:usesCleartextTraffic="true"
/>
[...]
</application>

18

Un problème similaire s'est produit avec moi.
Apparemment, Mcafee bloque le port 8081. Il m'a fallu des heures pour comprendre cela.

Essayez de courir:

react-native run-android --port=1234

Lorsque l'application apparaît avec une erreur sur l'émulateur, accédez aux paramètres de développement ( Ctrl+M ).

Remplacez «hôte de débogage et port du périphérique» par «localhost: 1234».

Fermez l'application et démarrez-la à partir du tiroir d'applications.


1
merci pour un indice, j'ai dû ouvrir le port 8081 dans mon pare-feu et il a commencé à fonctionner
ukie

Big upvote pour cela. Si vous avez Mcafee, j'essaierais ceci, cela a fonctionné pour moi.
Puerto

Merci, a enregistré mon projet
Rafid

Je suis coincé ici depuis deux jours, je n'aurais jamais pensé que c'était un port bloqué! Merci beaucoup!
P. Naoum le

J'ai essayé de frapper le localhost: 8081 dans le navigateur mais pas de chance. Peu de recherches et découvert que macafee a bloqué ce port. Suivez votre chemin. Commencé à fonctionner parfaitement bien.
Tushar Jajodia

18

Effectuez d'abord les étapes 4 et 5, puis vous pouvez exécuter votre projet. Si vous n'obtenez pas le résultat (avec les étapes 4 et 5), procédez comme suit

1- Essayez de rétrograder la version de votre Node (la version actuelle est 12.13.1)

  choco uninstall nodejs
  choco install nodejs --version 12.8

2- Ajouter le chemin du module npm ( C:\Users\your user name\AppData\Roaming\npm) aux variables système au lieu des variables utilisateur

3- Installez react native globalement en utilisant la commande

  npm install -g react-native-cli

4- Allez à la racine de votre répertoire de projet et exécutez la commande suivante:

  react-native start

5- Ouvrez un autre terminal à la racine de votre projet et exécutez la commande suivante:

   react-native run-android 

ÉDITER :

Vous utilisez Genymotion? Si oui, procédez comme suit:

Après l'étape ci-dessus si vous obtenez l'erreur suivante?

error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.

Ouvrez votre genymotion et accédez à:

genymotion menu -> Settings -> ADB -> Puis sélectionnezuse custom android sdk tools (cliquez sur parcourir pour trouver l'emplacement du sdk)

Enfin, exécutez à nouveau votre projet.


1
12.9 a également fonctionné pour moi, merci, j'avais mis à niveau vers la version 12.13.x et j'ai commencé à avoir le problème ci-dessus.
Huey Mataruse


17

ajoutez simplement trois éclaboussures dans: node_modules \ metro-config \ src \ defaults \ blacklist.js

remplacer cette pièce:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

12

si tout est correctement configuré, essayez ceci:

adb reverse tcp: 8081 tcp: 8081

Pourquoi? "Lorsque RN Packager est en cours d'exécution, un serveur Web actif est accessible dans votre navigateur à l'adresse 127.0.0.1:8081. C'est à partir de ce serveur que le bundle JS de votre application est servi et actualisé au fur et à mesure que vous apportez des modifications. Sans le proxy inverse, votre téléphone ne pourra pas se connecter à cette adresse. "

tous les crédits à Swingline0


Pourriez-vous s'il vous plaît ajouter à votre réponse pourquoi cela devrait fonctionner et ce que fait cette commande?
creyD

J'ai passé toute la journée à essayer de basculer entre les bibliothèques et c'était mon problème
Adam Katz

10

[Réponse rapide]

Après avoir essayé de résoudre ce problème dans mon espace de travail, j'ai trouvé une solution.

Cette erreur est due au fait qu'il y a un problème avec Metro en utilisant certaines combinaisons de version NPM et Node.

Vous avez 2 alternatives:

  • Alternative 1: essayez de mettre à jour ou de rétrograder npm et la version du nœud.
  • Alternative 2: Accédez à ce fichier: \node_modules\metro-config\src\defaults\blacklist.jset modifiez ce code:

    var sharedBlacklist = [
      /node_modules[/\\]react[/\\]dist[/\\].*/,
      /website\/node_modules\/.*/,
      /heapCapture\/bundle\.js/,
      /.*\/__tests__\/.*/
    ];

    et changez en ceci:

    var sharedBlacklist = [
      /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
      /website\/node_modules\/.*/,
      /heapCapture\/bundle\.js/,
      /.*\/__tests__\/.*/
    ];

    Veuillez noter que si vous exécutez un npm installou un, yarn installvous devez à nouveau modifier le code.


8

Cela a fonctionné pour moi après avoir essayé plusieurs façons.

Dans le fichier node_modules\metro-config\src\defaults\blacklist.js

Remplacer:

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

avec :

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

J'espère que cela t'aides.


A travaillé comme un charme, merci
César Bermúdez

A travaillé pour moi aussi. Mais pourquoi ai-je dû le corriger? Qu'est ce qui ne s'est pas bien passé?
Mashrur

De l'apparence de celui-ci, metro-configutilisé \ pour les chemins au lieu de /, que cette réponse suggère de modifier. Ne fais pas ça . La modification des packages npm signifie que toute votre équipe doit le faire sur sa machine, en CI, en préparation, en production et à chaque fois que metro-config publie une mise à jour. Une meilleure approche consiste à fourcher metro-config sur GitHub, à valider un correctif, à pousser et à soumettre un PR pour le corriger pour tout le monde.
Cameron Wilby le

6

À partir d'Android 9.0 (niveau d'API 28), la prise en charge du texte clair est désactivée par défaut.

C'est ce que vous devez faire pour vous débarrasser de ce problème si vous exécutez correctement les commandes normales

  1. npm installer
  2. démarrage natif de réaction
  3. réaction native run-android

Et modifiez votre fichier manifeste Android comme ceci.

<application
    android:name=".MainApplication"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true" // add this line with TRUE Value.
android:theme="@style/AppTheme">

5

Après des heures à chercher une réponse. La solution était de faire un nœud de rétrogradation vers la version 12.4.

Dans mon cas, je me rends compte que l'erreur se produit simplement dans la version react native 0.60 avec la version noeud 12.6.


4

Ma solution à cela est la suivante:

Démarrer le serveur Metro

$ react-native start

Démarrez Android

$ react-native run-android

Si vous voyez des erreurs indiquant «port 8081 déjà utilisé», vous pouvez arrêter ce processus et le réexécuter

$ react-native start

Voir la page de dépannage de React Native .


4

Si vous êtes sous Linux, ouvrez le terminal à partir du répertoire racine de l'application et exécutez

npm start

puis ouvrez une autre fenêtre de terminal et exécutez:

react-native run-android

3

Je veux juste ajouter une possibilité non évidente qui n'est pas couverte ici. J'utilise @ react-native-community / netinfo pour détecter les changements de réseau, principalement l'état du réseau. Pour tester l'état du réseau hors tension, le commutateur WIFI (sur l'émulateur) doit être désactivé. Cela coupe également efficacement le pont entre l'émulateur et l'environnement de débogage. Je n'avais pas réactivé le WIFI après mes tests car j'étais loin de l'ordinateur et je l'avais rapidement oublié à mon retour.

Il est possible que cela soit également le cas pour quelqu'un d'autre et qu'il vaut la peine de vérifier avant de prendre d'autres mesures drastiques.


3

J'avais le même problème, le problème pour moi était que adb n'était pas dans le bon chemin d'environnement, l'erreur vous indique le port de métro, pendant que vous êtes dans l'adb, les ports sont tués et redémarrés.

Ajouter une variable d'environnement (ADB)

  1. Variables d'environnement ouvertes
  2. Sélectionnez dans la deuxième variable PATH de trame et cliquez sur l'option d'édition ci-dessous
  3. Cliquez sur ajouter une option
  4. Soumettez le chemin des outils de la plate-forme SDK C: \ Users \ My User \ AppData \ Local \ Android \ Sdk \ platform-tools

Remarque : ou selon l'emplacement de adb.exe sur votre ordinateur

  1. Sauvegarder les modifications

Exécutez à nouveau Android Build

$ react-native run-android

Ou

$ react-native start

$ react-native run-android

3

J'ai également été confronté à ce problème. J'ai résolu cette étape suivante.

Vérifiez le chemin du sdk android dans Environment Veritable.

Ajouter ANDROID_HOME = C:\Users\user_name\AppData\Local\Android\Sdkà la variable système
et C:\Users\user_name\AppData\Local\Android\Sdk\platform-toolschemin variable système

remplacer sharedBlacklist comme ci-dessous le segment de code,

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

dans node_modules / metro-config / src / default / blacklist.js

Ensuite, exécutez npx react-native run-android --port 9001

Bon codage ..!


2

J'ai vécu cela simplement parce que mon Wifi a été désactivé par erreur sur mon émulateur, je l'ai rallumé et il a commencé à fonctionner correctement. J'espère que c'est utile à quelqu'un


2

la possibilité de cette erreur est également le mauvais chemin, vérifiez une fois

 export ANDROID_HOME=/Users/microrentindia/Library/Android/sdk/
 export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

Jamais pensé à ça. Mais c'était la réponse pour moi.
Siraj Alam

2

La solution qui a fonctionné pour moi est la suivante:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
]; 

Mon exemple de code


2

mettre à jour cette pièce dans la liste noire du métro

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

2

J'ai rencontré le même problème en suivant le tutoriel React Native (développement sous Linux et ciblage Android).

Ce problème m'a aidé à résoudre le problème dans les étapes suivantes. Exécutez les commandes suivantes dans l'ordre ci-dessous:

  1. (dans le répertoire du projet) mkdir android/app/src/main/assets
  2. react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
  3. react-native run-android

Vous pouvez automatiser les étapes ci-dessus en les plaçant dans une scriptspartie de package.jsoncomme ceci:

"android-linux": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"

Ensuite, vous pouvez simplement exécuter à npm run android-linuxpartir de votre ligne de commande à chaque fois.


1

Par défaut, un petit serveur JavaScript appelé "Metro Server" s'exécute sur le port 8081.

Vous devez rendre ce port disponible pour que ce serveur démarre. Alors,

  1. libérer le port
  2. fermez votre appareil virtuel
  3. "React-native run-android" à nouveau.

Comment libérer le port?

http://tenbull.blogspot.com/2019/05/how-to-kill-process-currently-using.html

Comment tuer le processus utilisant actuellement un port sur localhost dans Windows?

et surtout, j'ai mis à jour ma version de nœud de 8.x à 10.x (dernière), comme suggéré par facebook @ https://facebook.github.io/react-native/docs/getting-started


1

Pour moi, ce problème a commencé avec la mise à niveau de react-native. La mise à niveau était nécessaire pour ajouter la prise en charge 64 bits.

Before:
-------- 
Environment:
Node: 10.15.0
npm: 6.9.0
Watchman: 4.9.0
Xcode: Not Found
Android Studio: 3.4 AI-183.6156.11.34.5692245

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: ~0.55.2 => 0.55.4
react-native-cli: 2.0.1

After:
------
info 
React Native Environment Info:
Binaries:
Node: 10.15.0
npm: 6.9.0
Watchman: 4.9.0
SDKs:
Android SDK:
API Levels: 23, 26, 27, 28
Build Tools: 27.0.3, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
react: ^16.8.6 => 16.9.0 
react-native: 0.59.9 => 0.59.9 
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1

De plus, une modification importante que j'ai apportée à la mise à niveau était dans ../android/build/build.gradle

android {
    ...
    defaultConfig {
        ...
        targetSdkVersion 28
        ...
    }
    ...
}

J'ai dû changer la targetSdkVersion de 27 à 28 après l'avertissement lorsque j'ai essayé de télécharger la version (.apk) sur la console de jeu goole. Je n'avais pas réalisé que c'était pour moi la cause première de l'erreur ci-dessus. Les réponses immédiates de @tom et @tinmarfrutos avaient un sens absolu.

J'ai résolu le problème en ajoutant android: usesCleartextTraffic = "true" à mon android / app / src / debug / AndroidManifest.xml


1

Dans mon cas, j'ai défini un proxy dans mon émulateur. Cela revient à la normale après avoir supprimé ce proxy.


1

IMPORTANT - Vous pouvez avoir de nombreux périphériques virtuels dans votre environnement. Assurez-vous que si vous changez AVD, vous répétez à nouveau le réglage.

INFORMATIONS DE DÉBOGAGE-

Si vous rencontrez une erreur ci-dessus, vous devez d'abord vérifier ce qui fonctionne sur le port 8081

Le moyen le plus rapide de trouver cela utilise la commande suivante dans le terminal

netstat -aon | findstr 8081

si cela vous montre quelque chose, cela signifie que le port est bloqué. si possible obtenir ce port débloqué.

Sinon, vous devrez changer le port. Le processus pour le faire a déjà été mentionné dans le commentaire ci-dessus par Naveen Kumar

react-native run-android --port=9001

Assurez-vous que 9001 n'est pas utilisé non plus :)


1

Essayez ces étapes si vous avez essayé tout ce qui est mentionné dans les solutions ci-dessus:

  1. Créer un fichier dans android / app / src / main / assets
  2. Exécutez la commande suivante:

bundle react-native --platform android --dev false --entry-file index.js --bundle-output android / app / src / main / assets / index.android.bundle --assets-dest android / app / src / main / res

  1. Maintenant, exécutez votre commande pour créer par exemple react-native run-android

Wow cela m'a aidé partiellement. Je préparais mon application pour google play market, tout ce que j'ai fait, c'est ajouter de nouvelles icônes d'actifs pour Android et changer le versin cible en 28. J'ai dû revenir à la version v27 et tout recommencer à travailler ... Je ne sais pas pourquoi réagir en ne travaillant pas avec sdk v28.
Michail Pidgorodetskiy

0

Essayez ce qui suit.

  1. Supprimer les dossiers Android et IOS
  2. exécuter l'éjection native de réaction
  3. exécuter react-native run-android

Peut-être qu'après les étapes précédentes, vous avez des exécutions npm start - --reset-cache

Je travaille, j'espère que cela vous aide.


0

Si vous utilisez un système d'exploitation Linux, il se peut que votre serveur distant npm ne fonctionne pas. Ouvrez un autre terminal (avec le répertoire du projet) et exécutez cette commande sudo npm start ou sudo react-native start avant de faire sudo react-native run-android


0

Le message d'erreur sur l'émulateur est un peu trompeur. Dans mon cas, j'ai utilisé un Macbook. J'avais besoin de modifier les autorisations sur android / gradlew en exécutant $ chmod 755 ./gradlew, puis l'application pourrait être créée et déployée sur l'émulateur Android.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.