web-dev-qa-db-fra.com

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

react-native run-Android la commande se termine en laissant un message dans Android simulator. 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 empaqueté pour publication."

Je suis totalement confus de ce que je fais mal.

Edit: Ajout d'une capture d'écran d'erreur

enter image description here

reactjsreact-nativereact-native-androidreact-native-climetro-bundler
133
Belle Solutions

Vous n'avez pas encore démarré le bundler. Courir npm start ou react-native start dans le répertoire racine de votre projet avant react-native run-Android.

65
Nerdragen

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: Renommer index.Android.js (dans le répertoire racine) à index.js ( Il y a peut-être un index.js fichier 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 :)

41
Saeed

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

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

Si vous consultez la différence 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/

35
Tom

faites d'abord les étapes 4 et 5, 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 votre Node version (la version actuelle est 12.13.1)

  choco uninstall nodejs
  choco install nodejs --version 12.8

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

- Installer réagir nativement globalement en utilisant la commande

  npm install -g react-native-cli

4 - Accédez à 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

MODIFIER:

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 allez sur:

menu genymotion -> Paramètres -> ADB -> Sélectionnez ensuite utiliser des outils sdk personnalisés Android Android (cliquez sur parcourir pour trouver l'emplacement sdk)

Enfin, exécutez à nouveau votre projet ..

20
AbolfazlR

ajoutez simplement trois splash 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
Alireza

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

Essayez d'exécuter react-native run-Android --port=1234

Une fois que l'application apparaît avec une erreur sur l'émulateur, accédez aux paramètres de développement (accessibles en cliquant sur crtl + M)

Remplacez "l'hôte et le port du serveur de débogage pour le périphérique" par "localhost: 1234"

fermez l'application et démarrez-la depuis le tiroir de l'application

j'espère que ça va t'aider aussi!!

12
Naveen Kumar

Vous pouvez essayer ce qui suit:

Ajoutez cette ligne sur votre AndroidManifest.xml

<application
[...]
Android:usesCleartextTraffic="true"
/>
[...]
</application>
11
tinmarfrutos

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

Cette erreur est due à un problème avec Metro utilisant certaines combinaisons de NPM et de la version 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.js et modifiez ce code:

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

    et passez à ceci:

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

    Veuillez noter que si vous exécutez un npm install ou un yarn install vous devez à nouveau modifier le code.

9
Javier C.

si tout est correctement configuré, essayez ceci:

adb reverse tcp: 8081 tcp: 8081

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

tous les crédits à Swingline

8
Tua Tara

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.

6
Mangalprada Malaya

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

Dans mon cas, je me rends compte que l'erreur se produit uniquement dans la version réagit natif 0.60 avec la version noeud 12.6.

5
Victor Araújo

Ma solution est la suivante:

Démarrer le serveur Metro 

$ react-native start

Démarrez Android 

$ react-native run-Android

Si vous voyez des erreurs disant "port 8081 déjà utilisé", alors vous pouvez tuer ce processus et réexécuter

$ react-native start

Voir Page de résolution des problèmes native React .

4
shizhen

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

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

  1. installation de npm
  2. démarrage réactif
  3. réagir-natif exécuter-Android

Et modifiez votre fichier de 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">
4
MD. Shafiul Alam Biplob

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, tandis 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 le deuxième cadre variable PATH et cliquez sur l'option d'édition ci-dessous
  3. Cliquez sur ajouter une option
  4. Soumettez le chemin des outils de la plateforme sdk C:\Users\My User\AppData\Local\Android\Sdk\platform-tools

Note: Ou selon où se trouve adb.exe sur votre machine

  1. Sauvegarder les modifications

Exécutez Android build again

$ react-native run-Android

Ou

$ react-native start

$ react-native run-Android
3
CarlosChavarria

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

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

My code example

2
Jorge Santos Neill

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

Vérifiez Android chemin sdk dans Environment Veritable.

Ajouter Android_HOME = C:\Users\user_name\AppData\Local\Android\Sdk in variable système
et C:\Users\user_name\AppData\Local\Android\Sdk\platform-tools chemin dans 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

Exécutez ensuite npx react-native run-Android --port 9001

Codage heureux ..!

2
Chanaka

Essayez ce qui suit.

  1. Supprimer les dossiers Android et IOS
  2. exécuter l'éjection native de react
  3. exécuter réactif natif exécuter 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.

1
LuisO

J'ai vécu cela juste parce que mon Wifi était éteint par erreur sur mon émulateur.Je l'ai rallumé et il a bien fonctionné. J'espère que c'est utile à quelqu'un

1
Forest baba

Pour moi, ce problème a commencé avec la mise à niveau de React-Native. La mise à niveau était nécessaire pour ajouter une 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, un changement important que j'ai apporté à la mise à niveau a été dans ../Android/build/build.gradle

Android {
    ...
    defaultConfig {
        ...
        targetSdkVersion 28
        ...
    }
    ...
}

J'ai dû changer la targetSdkVersion de 27 à 28 suite à un avertissement lorsque j'ai essayé de télécharger la build (.apk) sur goole play console. Je n'avais pas réalisé que c'était la cause première de l'erreur ci-dessus pour moi. 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
vivekkan

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

npm start

puis ouvrez une autre fenêtre de terminal et exécutez un run-around réactif natif

1
solomon njobvu

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

INFORMATIONS DE DÉBOGAGE-

Dans le cas où vous rencontrez l'erreur ci-dessus, vous devez d'abord vérifier ce qui fonctionne sur le port 8081

Le moyen le plus rapide de trouver qui 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, débloquez ce port.

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

react-native run-Android --port=9001

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

1
TARJU

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
1
user3143487

Je veux juste ajouter une possibilité non évidente non 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 hors réseau, 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 depuis que j'étais loin de l'ordinateur et l'ai rapidement oublié à mon retour.

Il est possible que cela soit également le cas pour quelqu'un d'autre et mérite d'être vérifié avant de prendre d'autres mesures drastiques.

1
arunmenon

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 construire par exemple réagir-natif exécuter-Android
0
Prayag

vous pouvez également rétrograder le noeud js vers une version inférieure à 12 et supprimer nodemodule puis relancer l'installation de npm

0
Hazem AbdelHamid

J'ai fait: réactif natif start et npx react natif run-Android.

Cependant, pour Min19, (basé sur Ubuntu), j'avais le même problème jusqu'à ce que je lance:

echo fs.inotify.max_user_watches=582222 | Sudo tee -a /etc/sysctl.conf && Sudo sysctl -p

De: https://reactnative.dev/docs/troubleshooting#content

Au moins, j'ai fait fonctionner l'application sur mon téléphone portable.

0
Jose Cabrera Zuniga

Le message d'erreur sur l'émulateur est un peu trompeur. Dans mon cas, j'ai utilisé un Macbook. J'ai dû 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.

0
Jane

Par défaut, un petit serveur JavaScript appelé "Metro Server" fonctionne 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. "réactif natif 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 à niveau 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

0
Karthik H

Si vous utilisez Linux OS, 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 le faire Sudo react-native run-Android =

0
vicky keshri

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

0
Benson

Dans certains cas, vous voudrez peut-être fermer le port du bundle React-native et réexécuter l'application avec le même processus

1.Sudo kill -9 $(Sudo lsof -t -i:9001)

2.npm start inside the project

3. react-native run-Android
0
Varun Pradhan

Ce qui a fonctionné pour moi était:

  1. fermer toutes les consoles
  2. ouvrir une nouvelle console
  3. $ adb devices
  4. assurez-vous que vous n'avez connecté qu'un seul appareil
  5. $ react-native run-Android
0
dcx86

mettre à jour cette partie dans la liste noire du métro

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