erreur "Impossible d'obtenir BatchedBridge, assurez-vous que votre bundle est correctement emballé" au démarrage de l'application

167

Essayer de créer un projet natif de réaction sur Android 4.4.2 J'obtiens cet écran d'erreur

ladite erreur

et ne pouvait trouver aucun moyen de le résoudre. J'ai essayé de redémarrer le packager, de reconnecter l'appareil, même de réinstaller React native et de démarrer un nouveau projet. Sur les versions 6.0.0 et ultérieures, cela fonctionne très bien.

Zygro
la source
1
Avez-vous obtenu cette erreur après l'exécution react-native run-android? J'obtiens l'erreur dans ce cas, ce qui est étrange car en mode débogage, il ne devrait pas être nécessaire d'utiliser le bundle JS afaik car il est censé se connecter au serveur de packages.
Ryan H.
J'ai posté une réponse au même problème ici: stackoverflow.com/a/45110063/706798
Anton
J'obtiens ce même message d'erreur, mais pour iOS. Quelqu'un a des conseils? J'ai essayé d'exécuter 'react-native run-ios', mais cela ne fonctionne pas, car XCode est sur un lecteur externe pour moi.
ryanwebjackson

Réponses:

145

Une solution possible pour cela est que vous ne regroupez probablement pas d'abord votre application, effectuez les étapes suivantes, puis déployez votre app-debug.apk sur votre appareil

$ cd myproject  
$ react-native start > /dev/null 2>&1 &  
$ curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

(si le dossier assetsn'existe pas, créez-le)

Puis exécutez à partir de la racine du projet

$> (cd android/ && ./gradlew assembleDebug)

installez l'apk créé sur votre appareil, à partir de l'emplacement: android/app/build/outputs/apk/app-debug.apk

faites-moi savoir si cela résout votre problème

MODIFIER :

Vous pouvez simplement le mettre dans votre package.json en tant que script pour l'automatiser, je pense qu'il sera corrigé dans les prochaines versions de react-native et sera exécuté avant d'assembler l'APK final, donc cela ne sera pas nécessaire (j'espère ainsi que)

mettre:

"scripts": {
    "build": "(cd android/ && ./gradlew assembleDebug)",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/"
  },

ou comme mentionné l'équivalent curl, mais dans la plupart des cas, ce qui précède est plus robuste

tbo
la source
4
Oui cela fonctionne!!! Qu'est-ce que je viens de faire? pourquoi curl? aussi, cela peut-il être automatisé?
Zygro
Merci beaucoup, car mon application ne liera pas le bundle natif React.
GeekHades
3
Cela ressemble à un hack. Si vous empaquetez le JavaScript dans un seul fichier, n'obtiendrez-vous pas la capacité de rechargement en direct lors de l'exécution de l'application pendant le développement?
Liron Yahdav
2
ce n'est pas pour le développement mais pour le packaging réel de l'APK
tbo
rien ne se passe et je reçois toujours une erreur: - com.facebook.react.devsupport.JSException: Impossible d'obtenir BatchedBridge, assurez-vous que votre bundle est emballé correctement
Dinesh R Rajput
110

Je suis également tombé sur ce problème. Ce que j'ai fait, c'est de forcer l'application sur mon appareil, puis j'ai ouvert une autre console et j'ai couru

react-native start

puis j'ai rouvert l'application à partir de mon appareil et elle a recommencé à fonctionner.

EDIT: Si vous utilisez un appareil Android via USB et que vous l'avez débranché ou que votre ordinateur s'est mis en veille, vous devrez peut-être d'abord exécuter

adb reverse tcp:8081 tcp:8081
Felipe
la source
5
Cela a résolu mon problème lors de l'utilisation react-native run-android. Utiliser react-native startn'était jamais nécessaire pour moi quand je faisaisreact-native run-ios
Dylan Pierce
2
Cela a fonctionné, mais pourquoi cela se produit-il? Est-ce que ça va être corrigé? Dois-je toujours ouvrir 2 terminaux et faire le «démarrage» avant de pouvoir l'exécuter sur un appareil?
Marko
ça marche pour moi aussi ! passé des heures à trouver une solution
dtjmsy
adb reverse tcp:8081 tcp:8081me suffisait en soi. Merci beaucoup!
Darius
C'est génial après cela, vous pourriez faire l'installation ./adb
Faris Rayhan
27

J'ai juste cette erreur. Voici ce que j'ai fait pour réparer: j'ai sélectionné Dismiss, je suis allé dans le menu Développeur, puis Dev Settings, choisissez Debug server host & port for device, j'ai ajouté l'adresse IP et le port de mon ordinateur:, 192.168.0.xx:8xxxutilisez l'adresse IP attribuée aux machines de développement sur votre réseau wifi. Le port est généralement:8081

Une fois que j'ai fait cela, tout s'est bien passé. De plus, pendant que vous êtes dans le menu de développement, n'oubliez pas de sélectionner Enable Live Reloadet Debug JS Remotely, cela vous rend la vie beaucoup plus facile lors du débogage.

cube
la source
Travaux! Pour l'utilisateur ubuntu: exécutez ifconfig, puis recherchez inet addr: xxx.xxx.xxx.xxx où xxx * est l'
adresse
Cela a fonctionné pour moi sur un niveau d'API 19 / Kitkat 4.4, voir stackoverflow.com/questions/31525431/… , facebook.github.io/react-native/docs/…
Michael Ribbons
Je vous remercie! Je n'ai à faire cette configuration que lorsque je débogue sans câble USB (avec des outils comme WiFi ADB).
Fidan Hakaj
4
Il est important de noter que vous pouvez créer le menu Développeur auquel @cube fait référence ci-dessus en secouant physiquement votre appareil Android. Cela peut sembler étrange, mais c'est ce qui le soulèvera. Suivez ensuite le reste des instructions. Cela a résolu le problème pour moi.
flyingace
22

C'est ce qui a fonctionné pour moi (après avoir essayé toutes les autres solutions que j'ai trouvées ...):

Courir à l' adb reverse tcp:8081 tcp:8081intérieur\Android\sdk\platform-tools

Chaim Salzer
la source
1
peut exécuter cette commande n'importe où, pas besoin de b dans platform-tools
goldylucks
1
J'ai trouvé que react-native run-androidtente d'exécuter cette commande et dépend de la variable d'environnement Windows pathpour contenir le platform-toolschemin.
straya
1
Merci, cela a fonctionné. PATH est C: \ Users \ USERNAME \ AppData \ Local \ Android \ sdk \ platform-tools
chazefate
non, ne fonctionne pas sur l'émulateur Windows 10 et Android
pixel
16

J'ai également eu cela lorsque j'ai commencé pour la première fois avec React Native, en utilisant un appareil physique. Si tel est le cas, vous devez faire des choses supplémentaires avant de pouvoir commencer. Vous devez entrer des informations sur votre machine de développement dans les `` Paramètres de développement '' de React Native.

Lorsque vous voyez l'erreur, secouez votre appareil . Une boîte de dialogue apparaîtra, la dernière option sera «Paramètres de développement». Sélectionnez «Debug server hot & port for device» et entrez votre adresse IP locale et le port utilisé (généralement 8081).

Voir le dernier paragraphe de https://facebook.github.io/react-native/docs/running-on-device-android.html

Richh94
la source
Ceci est littéralement une répétition, mot pour mot, de ce que j'ai dit ci-dessus (en août)
cube
3
Je ne savais pas que je devais secouer l'appareil. Tout d'abord, je le publierais en commentaire, mais je n'ai pas assez de points pour le faire. J'ai voté pour votre message.
Richh94
La solution la plus simple et la plus propre. Merci!
callOfCode
7

Si aucune solution ne fonctionne pour vous, essayez ceci:

J'ai trouvé que mon <root>/android/app/build/intermediates/assets/debugdossier était vide et qu'en cours d'exécution, je cd android && ./gradlew assembleDebugne créais pas les fichiers requis, qui sont ensuite utilisés par le fil javascript dans nos applications natives de réaction.

J'ai exécuté manuellement la commande suivante que la commande debug build aurait dû créer idéalement.

node node_modules/react-native/local-cli/cli.js bundle --platform android --dev true --reset-cache --entry-file index.android.js --bundle-output /<path to dir>/android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest /<path to dir>/android/app/build/intermediates/res/merged/debug

Après avoir exécuté ces commandes, j'ai trouvé deux fichiers bundle dans ce répertoire <root>/android/app/build/intermediates/assets/debug

Et puis j'ai relancé cd android && ./gradlew installDebugmon application a recommencé à fonctionner.

Déboguera davantage et mettra à jour ce qui échoue réellement.

Sumit Kushwaha
la source
Juste pour clarifier ce qui se passe, il semble que lors de l'intégration d'un react native dans un projet existant, le chemin de sortie du bundle n'est PAS défini automatiquement, vous devez donc le définir vous-même. D'où le chemin de sortie du bundle = / chemin / vers / actifs?
robsstackoverflow
Vous êtes le meilleur btw.
robsstackoverflow
7

Dans un terminal séparé , connectez votre appareil à l'ordinateur et exécutez les commandes suivantes:

react-native start 
cd user/Library/Android/sdk/platform-tools/
./adb reverse tcp:8081 tcp:8081

Terminal d' application :

react-native run-android 
install apk on your device from this location android/app/build/outputs/apk/app-debug.apk
Brijmohan Karadia
la source
1
Peut-être pourriez-vous élargir votre réponse pour inclure un peu plus de détails sur la signification des différentes étapes de votre réponse, à partir de quels répertoires les commandes doivent être exécutées, etc. Je pense que cela rendrait votre réponse beaucoup plus utile.
niels
C'est la bonne réponse. Cela vous permet d'itérer rapidement en vous connectant au serveur natif react au lieu d'avoir à reconditionner le bundle à chaque modification.
Joshua Pinter
6

Il est un peu trop tard mais cela fonctionne vraiment pour moi.

  1. react-native run-android.
  2. react-native start.

La première commande va construire apk pour Android et la déploiera sur votre appareil s'il est connecté. Lorsque vous ouvrez l'application, un écran rouge s'affiche avec une erreur. Ensuite, exécutez la deuxième commande qui exécutera le packager et créera le bundle d'applications pour vous.

Shamsher
la source
5

Essayez cette commande dans le terminal, puis rechargez. Ça a marché pour moi

adb inverse tcp: 8081 tcp: 8081

Praneeth
la source
5

voir issue :

1. démarrage natif de réaction

2. cliquez Reload(R,R)sur votre appareil.

XYz Amos
la source
5
  1. redémarrer le genymotion
  2. courir react-native run-android
  3. le problème a été résolu
Yang
la source
Pour de vrai? restart the genymotion? Ty campagnol.
Michal
C'est comme dire "Oh, votre site Web ne fonctionne pas? Essayez de redémarrer votre serveur".
Michal
4

J'avais la même exception sur l'appareil Z3 Compact D5803 - 6.0.1

J'ai ouvert le fichier .buckconfig et changé la ligne:

target = Google Inc.:Google APIs:23

à

target = Google Inc.:Google APIs:24

Parce que j'ai vu dans SDK Manager qu'Android 6.X a le niveau api 24.

laszl0
la source
3

Pour moi, c'est parce que adbn'était pas dans le PATH. Il est situé /Users/man/Library/Android/sdk/platform-toolspour moi, il peut être ailleurs pour vous, mais de toute façon, trouvez-le et ajoutez-le à votre chemin pour voir si cela vous aide.

h - n
la source
3

Puisque vous utilisez Android <5.0, vous ne pouvez pas utiliser la adb reverseméthode par défaut , mais Facebook a ajouté une documentation officielle pour vous connecter au serveur de développement via Wi-Fi , qui prendrait en charge votre version. Citant les instructions pour MacOS, mais ils les ont également pour Linux et Windows:

Méthode 2: connectez-vous via Wi-Fi

Vous pouvez également vous connecter au serveur de développement via Wi-Fi. Vous devrez d'abord installer l'application sur votre appareil à l'aide d'un câble USB, mais une fois que cela a été fait, vous pouvez déboguer sans fil en suivant ces instructions. Vous aurez besoin de l'adresse IP actuelle de votre machine de développement avant de continuer.

Vous pouvez trouver l'adresse IP dans Préférences Système → Réseau.

Assurez-vous que votre ordinateur portable et votre téléphone sont sur le même réseau Wi-Fi. Ouvrez votre application React Native sur votre appareil. Vous verrez un écran rouge avec une erreur. C'est acceptable. Les étapes suivantes résoudront ce problème. Ouvrez le menu Développeur intégré à l'application. Accédez à Paramètres de développement → Déboguer l'hôte du serveur pour l'appareil. Saisissez l'adresse IP de votre machine et le port du serveur de développement local (par exemple 10.0.1.1:8081). Revenez au menu Développeur et sélectionnez Recharger JS.

Jesús Carrera
la source
3

Il y avait ce problème "au hasard" et il m'a fallu un certain temps pour réaliser ce qui n'allait pas dans mon scénario.

Après avoir mis à jour vers React-native-cli 2.0.1, il y avait une sortie de message dans le journal qui m'a aidé à creuser et à trouver la cause première:

Serveur JS non reconnu, poursuite de la construction ...

Après avoir recherché quelques liens, j'ai trouvé celui-ci:

Impossible de reconnaître le serveur JS

Depuis que je suis sous Windows, j'ai lancé netstat et j'ai découvert que mon lecteur VLC fonctionnait également sur le port 8081 à l'origine du problème. Donc, dans mon cas, si je démarrais le serveur vlc avant le serveur react-native, cela ne fonctionnerait pas.

Ce même message de journal n'était pas affiché sur les versions précédentes de react-native-cli, ce qui le faisait échouer silencieusement.

TL, DR: vérifiez si quelque chose tourne sur le même port que le gestionnaire de paquets (8081 par défaut)

Luiz Henrique Martins Lins Rol
la source
2

Mon problème était que j'avais parcouru mon AndroidManifest.xmlfichier et j'avais supprimé la ligne

<uses-permission android:name="android.permission.INTERNET" />

car mon application n'aura pas besoin d'Internet. Cependant, l'application de débogage native react a besoin d'un accès Internet (pour accéder au packager). :)

SpencerL
la source
1
Mec, tu as sauvé ma journée. Était arraché mes cheveux :)
Christophe Cadilhac
2

Essayez de nettoyer le cache

react-native start --reset-cache

Hitesh Sahu
la source
2

Veuillez vérifier si vous rencontrez l'erreur suivante lorsque vous exécutez react-native run-android: adb server version (XX) doesn't match this client (XX); killing...

Dans ce cas, assurez-vous /usr/local/opt/android-sdk/platform-tools/adbet /usr/local/bin/adbdirigez-vous vers le mêmeadb

Dans mon cas, l'un a été pointé vers /Users/sd/Library/Android/sdk/platform-tools/adb(Android SDK), mais un autre a été pointé vers /usr/local/Caskroom/android-platform-tools/26.0.2/platform-tools/adb(Homebrew)

Et le problème a été résolu après les deux pointés /Users/sd/Library/Android/sdk/platform-tools/adb(Android SDK)

Serhey Dolgushev
la source
1

J'ai aussi cette erreur, vraiment confuse. cuz toutes les réponses ne fonctionnent pas. Juste après ajouter adb au chemin.

Bruce Lee
la source
1

Pour moi, la synchronisation latérale était activée et active. Le fermer immédiatement a fait disparaître le problème. Cela peut valoir la peine de fermer cette communication ou toute autre communication entre le PC et l'appareil

lee_dabiker
la source
1

J'ai fini par devoir ouvrir le port que j'utilisais (8081 par défaut). Sous Linux, vous pouvez effectuer les opérations suivantes

sudo iptables -A INPUT -p tcp --dport 8081 -m conntrack --ctstate NEW,ESTABLISHED -j ACCEPT
sudo iptables -A OUTPUT -p tcp --sport 8081 -m conntrack --ctstate ESTABLISHED -j ACCEPT

Vous pouvez tester pour voir si vous avez réellement besoin de le faire. Accédez simplement à votre serveur de développement dans Chrome sur votre appareil Android. S'il ne répond pas, c'est peut-être ce dont vous avez besoin. S'il répond, cela ne vous aidera pas.

Anthony Naddeo
la source
1

Ma façon est:

react-native start

Après cela dans votre appareil en utilisant:

click to Reload.

Voir dans la console react-native, ce sera récupérer les données du bundle js.

ThienSuBS
la source
C'était mon problème, car le terminal ne démarrait pas. Merci !
Nicolas Leucci
1

J'ai eu le même problème. Lorsque j'ai créé un projet natif de réaction via l' application AwesomeProject create-react-native-app, cela fonctionnait bien dans l'application Expo sur téléphone. Après cela, j'ai voulu utiliser ce projet de démarrage rapide pour développer mon projet et j'ai eu la même erreur que vous.

Après quelques recherches, je découvre qu'il est préférable de démarrer un nouveau projet avec réact-native init AwesomeProject (avec tous les paramètres dans les documents react native), puis exécutez cette commande:

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

Cela devrait résoudre le problème avec bundle (--dev false n'affiche pas d'avertissements)

Tout ce que vous devez faire pour que l'application s'exécute sur votre appareil virtuel / réel est:

react-native run-android

Et cela devrait fonctionner très bien. Au moins ça a marché pour moi.

Sebastian Voráč
la source
1

Pour moi, le problème était que «adb» n'était pas reconnu - cochez cette réponse.

Pour résoudre ce problème, ajoutez C: \ Users \ USERNAME \ AppData \ Local \ Android \ sdk \ platform-tools aux variables d'environnement

gentil homme
la source
Ce n'est rien de plus qu'un commentaire. Mais si vous collez la dernière ligne de votre réponse liée ici, cela devient une réponse valide. Sinon, il y a des chances que cette réponse soit supprimée.
Amit Joshi le
1

La plupart d'entre nous sont confrontés à ce problème pour la première fois, lorsque nous commençons à réagir au projet natif n ° 1.

Quelques étapes simples ont résolu mon problème:

J'ai créé un exemple de projet à l'aide de la commande:

react-native init ReactProject1

Solution

Le correctif est d'aider local-cli\runAndroid\adb.jsà trouver adb.exe, de la même manière que local-cli\runAndroid\runAndroid.js:

trouver l'instruction replace sous projectname (tout ce que vous avez donné)\node_modules\react-native\local-cli\runAndroid

Remplacer:

const devicesResult = child_process.execSync('adb devices');

Par:

const devicesResult = child_process.execSync( (process.env.ANDROID_HOME ? process.env.ANDROID_HOME + '/platform-tools/' : '') + 'adb devices');

après avoir effectué le remplacement ci-dessus, exécutez simplement react-native run-android dans votre cmd, il regroupera apk et essaiera d'abord d'installer le bundle js localement sur votre appareil. (J'ai du succès)

DeepakPanwar
la source
0

J'ai essayé de nombreuses suggestions ci-dessus / ci-dessous, mais en fin de compte, le problème auquel j'ai été confronté était celui des autorisations avec watchman, qui avait été installé à l'aide de homebrew plus tôt. Si vous regardez les messages de votre terminal tout en essayant d'utiliser l'émulateur et que vous rencontrez des erreurs «Autorisation refusée» en ce qui concerne watchman avec ce message «Impossible d'obtenir BatchedBridge» sur votre émulateur, procédez comme suit:

Accédez à votre /Users/<username>/Library/LaunchAgentsrépertoire et modifiez les paramètres d'autorisations afin que votre utilisateur puisse lire et écrire. Cela est indépendant du fait que vous ayez ou non un com.github.facebook.watchman.plistfichier.

alexfigtree
la source
0

J'ai trouvé que je devais également ajouter un

mise à niveau native de réaction

pour que l'application s'exécute correctement.

M. Solle
la source
0

J'ai eu le même problème mais c'était une erreur stupide de ma part ...

Depuis le studio Android , je installDebug/installReleaselançais un script gradle à partir d'un appprojet plutôt que d'un rootprojet.

Martin Choraine
la source
0

Le moyen le plus simple!

  • Arrêtez le serveur et terminez la génération du projet.
  • Ouvrez un terminal 'Node.js'.
    • Accédez au dossier avec le projet «react-native».
    • Tapez 'react-native start' --Démarrage manuel du serveur react natif.
  • Accédez à votre terminal de l'éditeur de code et tapez 'react-native run-android.

Vous êtes prêt à partir!

Jason
la source
0

Redémarrez simplement votre système ou votre ensemble complet et le problème peut être résolu.

Vinayak Gupta
la source