Lorsque vous travaillez avec React Native, il est possible que vous rencontriez l’erreur suivante : Module AppRegistry is not a registered callable module. Cette erreur peut être frustrante car elle empêche votre application de se lancer correctement. Dans cet article, nous allons examiner les causes courantes de cette erreur et les étapes pour la corriger efficacement.
Qu’est-ce que AppRegistry dans React Native ?
AppRegistry est le point d’entrée de toute application React Native. Il enregistre le composant racine de votre application, qui sera rendu à l’écran. Si AppRegistry n’est pas configuré correctement ou si le fichier d’entrée (généralement index.js) contient des erreurs, cela peut entraîner l’erreur Module AppRegistry is not a registered callable module.
Causes fréquentes de cette erreur
Voici les raisons les plus courantes pour lesquelles cette erreur se produit :
- Fichier d’entrée incorrect : Le fichier
index.jsouApp.jsn’est pas configuré correctement ou ne contient pas le bon code. - Mauvaise importation de AppRegistry : Le module AppRegistry n’est pas importé ou utilisé correctement dans votre code.
- Nom incorrect de l’application : Le nom enregistré dans AppRegistry ne correspond pas à celui défini dans
app.json. - Problème avec Metro bundler : Des caches obsolètes ou des conflits dans Metro peuvent entraîner cette erreur.
- Erreur dans le composant racine : Si le composant enregistré dans AppRegistry contient des erreurs JavaScript ou React Native, cela peut également provoquer l’échec.
Exemple de code générant l’erreur
Voici un exemple de code qui pourrait provoquer cette erreur :
1 2 3 4 5 6 | <code>import { AppRegistry } from 'react-native';import App from './App';AppRegistry.registerComponent('NomIncorrect', () => App);</code> |
Dans cet exemple, le nom 'NomIncorrect' ne correspond pas au nom défini dans app.json, ce qui provoque l’erreur.
Solutions pour corriger cette erreur
Voici les étapes pour résoudre cette erreur en fonction de la cause :
1. Vérifiez le fichier index.js
Assurez-vous que votre fichier index.js contient le bon code pour enregistrer le composant racine :
1 2 3 4 5 6 7 | <code>import { AppRegistry } from 'react-native';import App from './App';import { name as appName } from './app.json';AppRegistry.registerComponent(appName, () => App);</code> |
Le appName importé depuis app.json doit correspondre au nom défini dans ce fichier.
2. Vérifiez le fichier app.json
Le fichier app.json doit contenir le bon nom de l’application :
<code>
{
"name": "NomCorrect",
"displayName": "Nom Correct"
}
</code>
Assurez-vous que le nom "NomCorrect" correspond au nom utilisé dans AppRegistry.registerComponent.
3. Nettoyez le cache de Metro bundler
Des caches obsolètes peuvent provoquer des conflits. Exécutez les commandes suivantes pour nettoyer le cache :
1 2 3 4 5 | <code>npm start --reset-cachenpx react-native run-androidnpx react-native run-ios</code> |
4. Vérifiez le composant racine
Assurez-vous que votre composant racine (App.js) est exempt d’erreurs et exporté correctement :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <code>import React from 'react';import { View, Text } from 'react-native';const App = () => { return ( <View> <Text>Bienvenue dans React Native !</Text> </View> );};export default App;</code> |
5. Réinstallez les dépendances
Si le problème persiste, essayez de réinstaller les dépendances de votre projet :
rm -rf node_modules
npm install
npx react-native run-android
[/source>
FAQ : Questions fréquentes
1. Que signifie l’erreur « Module AppRegistry is not a registered callable module » ?
Cette erreur signifie que le module AppRegistry, qui est essentiel pour enregistrer et rendre le composant principal de votre application, n’est pas configuré ou enregistré correctement.
2. Comment éviter cette erreur à l’avenir ?
Assurez-vous que le fichier index.js est correctement configuré et que le nom dans app.json correspond toujours à celui utilisé dans AppRegistry.registerComponent.
3. Est-ce que cette erreur peut survenir après une mise à jour ?
Oui, des mises à jour de React Native ou de vos dépendances peuvent provoquer cette erreur si les fichiers de configuration ou les modules ont été modifiés.
4. Cette erreur peut-elle se produire sur iOS et Android ?
Oui, elle peut survenir sur les deux plateformes, car AppRegistry est utilisé pour enregistrer l’application dans les deux environnements.
5. Puis-je utiliser un autre fichier qu’index.js pour le point d’entrée ?
Oui, mais vous devez configurer votre projet correctement pour pointer vers ce fichier en modifiant package.json ou les fichiers de build.
Conclusion
L’erreur Module AppRegistry is not a registered callable module est fréquente en React Native, mais elle est souvent causée par des problèmes de configuration simples. En suivant les étapes de résolution décrites dans cet article, vous pourrez corriger cette erreur et éviter qu’elle ne se reproduise à l’avenir. N’oubliez pas de toujours vérifier vos fichiers index.js et app.json, et de nettoyer le cache régulièrement pour éviter les conflits.
