Incompatibilité de la version native de React


220

Obtention du message suivant lorsque j'initialise un nouveau projet, puis que je lance l'émulateur Xcode:

Incompatibilité de version React-Native

Version Javascript 0.50.1 Version native: 0.50.0

Assurez-vous que vous avez reconstruit le code natif. ...

Quelqu'un sait-il ce qui se passe ici et peut-il m'aider?

Réponses:


376

Voici ce que j'ai fait avec:

Fermez tous les terminaux et relancez la génération.

Vous pouvez oublier de fermer le terminal nodejs d'un autre projet, et ils ont installé une version de réaction différente.

Ainsi, le code extrait du serveur nodejs est en conflit avec le serveur natif.


1
Que faire si je ne veux pas fermer mes terminaux actuellement ouverts (j'ai des applications en cours d'exécution)? Existe-t-il une autre solution de contournement?
Dimitar Tsonev

1
@DimitarTsonev vous pouvez simplement fermer ce terminal spécifique ouvert par react-native, ce qui montre Bundling 'index.android.js' 100.0% (1/1), done.
Val

1
force en utilisant pleinement la version de dépendance de réaction dans build.gradletravaillé. merci @Val
jake oliver

Fermé tous les terminaux et utilisé:react-native run-ios
Steffo Dimfelt

exécutez également pod installsi vous utilisez des cocoapodes.
Array

39

Si vous avez créé votre application react-native à l'aide de create-react-native-app. Vous devriez avoir un app.json (expo). et un fichier package.json, vérifiez si les versions de l'expo correspondent et changent en conséquence. Par exemple, dans mon cas, le problème était que dans le fichier app.json j'avais une version 25.0.0 pour l' attribut expo sdkVersion , je l'ai changé en 23.0.0 et tout a fonctionné.

package.json:

"dependencies": {
    "expo": "^23.0.4",
    "react": "16.0.0",
    "react-native": "^0.50.4"
  }

app.json:

{
  "expo": {
    "sdkVersion": "23.0.0" // before was 25.0.0
  }
}

Cela a fonctionné pour moi! Mise à jour rapide: vous ne pouvez pas utiliser de module npm direct pour votre package react-native et avoir à la place une archive tar. Si tel est le cas, vous pouvez utiliser le statut de réaction native pour vérifier votre version de RN. :)
blakeface

15

Accédez simplement à votre android/app/build.gradleet ajoutez à la dependenciessection:

dependencies{
compile ("com.facebook.react:react-native:0.50.3") { force = true } 
}

/// la version native de react peut être trouvée dans package.json


5
où est-ce que je change pour iOS
Anurag Shrivastava

quel est le changement équivalent dans package.json?
Nate Glenn

8

il suffit de forcer la version native de réagir dans le fichier de niveau d'application de votre Android, dans la dependenciessection.

compile ("com.facebook.react:react-native:0.52.0") { force = true }

travaillé pour moi


3
Cela a fonctionné pour moi. J'ai 0,53,3. J'ai ajouté une force avec 0.53.3, redémarré les terminaux, couru npm start -- --reset-cacheet courureact-native run-android
Florin Dobre

7

Si vous exécutez votre application React Native via Expo, la mise à niveau de React Native est susceptible de provoquer cette erreur (comme indiqué sur https://github.com/expo/expo/issues/923 ).

Si tel est votre scénario, vos options sont:

  1. Bump Expo (qui est répertorié dans votre package.json) vers une version compatible avec votre version React Native ( s'il en existe une, ce qui peut ne pas être le cas - à en juger par le problème lié, je suppose que le support d'Expo suit les versions de React Native).
  2. Annulez vos modifications, supprimez et réinstallez vos modules Node, Éjectez de l'Expo, puis (après avoir vérifié que vous pouvez toujours exécuter votre application après l'éjection) réessayez votre mise à niveau.

Expo ne prend en charge que React-Native jusqu'à 59,8 au moment de la rédaction. Pour la compatibilité expo / react -native, voir docs.expo.io/versions/latest/sdk/overview/#sdk-version (ce n'est pas exactement la même cause d'erreur que l'OP, mais semble pertinent à noter.)
Tijs Maas

6

Je n'ai jamais vu cette erreur auparavant, mais chaque fois que je ne parviens pas à faire fonctionner Xcode et React-Native ensemble, je fais plusieurs choses. Vérifiez avec quelle version de Xcode je travaille. S'il doit être mis à jour, je le mets à jour. Ensuite, nettoyer le gardien et la cache sont le deuxième endroit où je vais. Je n'utilise pas la commande reset cache. Il dit toujours que je dois vérifier le cache, donc je saute cela (vous pouvez le faire cependant, je suis juste confus). J'utilise rm -rf $ TMPDIR / react- * pour me débarrasser de toutes les versions en cache. Si cela ne fonctionne pas, j'essaie de créer l'application dans Xcode, puis je travaille à ma façon à partir de là, pour la créer avec run-ios natif de réaction. Avec ce message d'erreur, il semble que vous pourriez commencer par essayer de le construire avec Xcode. J'espère que cela aidera ... faites-moi savoir vos progrès. Bonne chance! (En outre, vous pouvez mettre à jour RN 0.


L'autre chose est que j'ai joué avec expo. Je me demande si cela a gâché les choses
Sam Rao

Vous pouvez simplement faire npm install --save react-native@0.51 Mais, j'essaierais d'abord de le construire avec Xcode. Avez-vous déjà fait ça? Si vous avez besoin d'aide, faites-le moi savoir.
Jared Nelson

6

Pour les développeurs Android qui n'ont pas pu le réparer en fermant et en reconstruisant simplement, désinstallez manuellement l'application sur l'émulateur / l'appareil.


3
La désinstallation de l'application du simulateur IOS a fonctionné pour moi.
negative_zero

6

J'ai eu ce problème pendant la plus longue période et aucune des solutions ci-dessus n'a aidé. J'étais en train de mettre à niveau create-react-native-appReact Native dans un projet jusqu'à ce que je découvre que toutes les versions d'Expo ne prennent pas en charge le dernier React Native.

J'ai trouvé cette page liée dans la documentation qui montre quelles combinaisons de versions de React Native, React et Expo sont officiellement prises en charge:

Source: https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md

La modification des fichiers app.jsonet package.jsonpour qu'ils correspondent aux versions correspondantes et l'exécution de npm installtout a fonctionné à nouveau.


6

J'utilise un appareil physique, dans mon cas, cela a résolu le problème:

  1. Désinstaller l'appli
  2. lsof -i :8081
  3. kill -9 PID
  4. Reconstruire l'application ( react-native run-androidou react-native run-ios)

Le simple fait de tuer tous les PID lsof -i :8081et de les reconstruire l'a fait pour moi sur iOS Simulator.
Ronan Boiteau

La même chose ici - essayé Rimraf node_modules, npm start —reset-cache, etc. - rien n'a fonctionné. Ensuite, j'ai fait comme ci-dessus - application désinstallée, utilisé taskkill / im node.exe et taskkill / f / PID (numéro donné à la dernière étape, du PID existant), puis react-native run-android. A travaillé un régal!
user1641906

5

Dans votre fichier build.gradle, ajoutez ce qui suit

implementation ("com.facebook.react:react-native:0.51.0") {
    force = true;
}

remplacez 0.51.0par la version de votre package.json


4

Essayez à nouveau d'installer les dépendances. Cela a fonctionné pour moi-

1.) yarn/npm install
2.)yarn/npm start --reset-cache


3

Pour moi, c'était dû à la react-nativeversion dans la dependencysection du package.jsonfichier. C'était:

"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.0"
}

Je l'ai échangé avec:

"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "0.52.0"
}

Maintenant ça marche bien.


3

Dans mon cas, j'y suis confronté sur iOS, et j'ai essayé de réinitialiser et de vider tout le cache à l'aide de la commande ci-dessous, mais j'ai également échoué, malgré de nombreux commentaires disant que la cause première est qu'il y a un packager de réaction en cours d'exécution quelque part accidentellement, j'ai redémarré mon mac et le problème est resté.

watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start --reset-cache

La solution est de supprimer le dossier de construction @ /ios/build, puis de l'exécuter react-native run-iosrésolu


3

J'ai essayé les solutions ci-dessus, mais l'ajout de cela à AndroidManifest.xml semble résoudre le problème.

  android:usesCleartextTraffic="true"

1
Cela a fonctionné comme du charme .. c'est la raison pour laquelle je n'aimerai jamais Android .. Il y a toujours un mot magique qui résout vos problèmes qui vous ont rendu fou pendant de nombreuses heures.
picacode le

2

Pour les autres avec le même problème sur iOS avec CocoaPods:

J'ai essayé toutes les solutions ci-dessus, sans chance. J'ai quelques packages avec des dépendances natives dans mon projet, et certains de ces modules pod nécessaires sont installés. Le problème était que React était spécifié dans mon Podfile, mais le pod React n'était pas automatiquement mis à niveau en utilisant react-native-git-upgrade.

Le correctif consiste à mettre à niveau tous les pods installés en exécutant cd ios && pod install.


2

Dans mon cas, l'installation d'un nouveau périphérique virtuel a aidé. J'utilise maintenant 1 appareil par application.


2

Utilisateurs de l'Expo - assurez-vous que votre app.jsonversion sdk et votre version package.jsonexpo sont (peuvent être égales) compatibles l'une avec l'autre.


Merci! C'était la solution pour un nouvel utilisateur de l'expo.
Jasper Blues

2

Cela arrive parfois lorsque vous essayez d'exécuter sans fermer le serveur de nœuds, dans lequel l'application précédente était en cours d'exécution, alors essayez de redémarrer React.Pour ce faire, exécutez simplement les commandes suivantes:

1. To kill current processes
killall node -9 

2. To Start React  Native
react-native start 

3. Then Run android
react-native run-android

L'exécution de cette commande a également fonctionné pour moi "killall node"
Seunope

2

Le correctif que nous avons fait était de nous assurer que les variables ANDROID_HOME et PATH étaient configurées avant la construction.

Tout d'abord, exécutez les deux commandes ci-dessous, puis créez l'application pour l'appareil.

export ANDROID_HOME=/Users/username/MyFiles/applications/androidsdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools


1

J'ai également eu ce problème avec Expo et iOS Simulator. Ce qui a fonctionné pour moi a été d'effacer le simulateurHardware > Erase All Content and Settings...


Je suis presque sûr que cela peut être accompli en désinstallant simplement l'application Expo de l'émulateur. Pas besoin de tout.
Ajay

1

Solution possible:

  1. Supprimez le package-lock.json
  2. Courir: watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/haste-map-react-native-packager-* && rm -rf node_modules/&& npm install

Si le problème persiste, essayez d'exécuter le projet directement à partir du Xcode

Cela a fonctionné pour moi.


1

Dans mon cas (pas en utilisant expo et Android build)

package.json

"dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.2"
}

Et app.json

{
  "sdkVersion": "27"
}

résolu le problème


Cela est particulièrement vrai si vous utilisez Expo. Consultez la documentation de mise à niveau de l'Expo pour plus d'informations: docs.expo.io/versions/latest/workflow/…
blakeface

1

J'essayais de créer et d'exécuter une application React Native à partir de WebStorm et j'ai rencontré ce problème. La solution simple pour moi était:

watchman watch-del-all

Sur macOS, s'il watchmann'est pas déjà installé, installez-le à l'aide de Homebrew :

brew install watchman

1

Dans mon cas, j'ai changé la expoversion manuellement. J'ai eu le même problème parce que j'ai oublié de mettre à jour sdkVersion dans app.json et babel-preset-expo dans package.json

Après cette exécution: expo r -cpour vider le cache et démarrer l'application.


1

Cette réponse est publiée en 2020, corrigez cette erreur en 3 étapes:

Première étape: j'ai changé la valeur de expoinpackage.json file vers la dernière version prise en charge, selon les documents de l'expo (visitez ici ).

Deuxième étape: j'ai changé la valeur de sdkVersioninapp.json file à la même valeur de expoin package.json. (Nombre égal à la dernière étape).

Troisième étape: j'ai changé la valeur de react-nativedans le package.jsonfichier à la même valeur de React Native Version, selon les documents de l'expo (visitez ici ).

maintenant vous êtes prêt à partir.

utiliser npm installpour installer la version spécifiée des dépendances, puis npm startpour exécuter le projet


Merci! Cela a fonctionné pour moi 18/06/20 - j'ai utilisé la version 38 du SDK pour les étapes 1 et 2, puis " react -native": " github.com/expo/react-native/archive/sdk-38.0.1.tar.gz ", pour l'étape 3
Ash Hogarth

1

J'ai obtenu ce classement lorsque les définitions de type TypeScript ne correspondent pas.

EG react-nativeà 0,61,5 po dependencieset @types/react-nativeà 0,60,0 po devDependencies.

Dès que j'ai mis à jour devDependencies, cela a fonctionné. Je n'ai rien eu à redémarrer.


1

Cela signifie que vous avez oublié de fermer l'ancien bundle (terminal nodejs) et que ce terminal a une autre version native de réaction.

Option 1: - Fermez tous les terminaux et redémarrez à nouveau.

Option 2: - démarrage natif de réaction - réinitialisation-cache

Option 3: - nœud killall.

Option 4: - Redémarrez votre système.


Wow biplov, a couvert toutes les réponses.
Tech9logy Creators

0

Ce n'est pas une solution, mais dans mon cas, plusieurs applications RN étaient installées sur mon appareil et j'essayais sans le savoir de `` recharger '' à partir de la mauvaise application. (Je développe deux applications simultanément pour le moment) Alors assurez-vous que vous êtes dans la bonne application!


0

Essayez de changer la version de votre react-native spécifiée dans votre package.json (sous les dépendances - react-native) en la même que 'Native Version' affichée dans le message d'erreur. Ensuite, exécutez à nouveau 'npm install'.


une idée de la façon de revenir à la version mentionnée dans le package.json?
HungrySoul

dans votre package.json, vous devriez voir quelque chose comme "react-native": "^ 0.55.0" sous "dependencies". Remplacez ce nombre (0.55.0 dans cet exemple) par la version souhaitée et exécutez à nouveau "npm install".
Pnar Sbi Wer
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.