Fejl: "main" er ikke registreret

Som udvikler af mobilapplikationer med React Native eller Expo, er du sandsynligvis stødt på den frustrerende fejl: "Application "main" has not been registered." eller den lignende "Invariant Violation: "main" has not been registered." Denne fejl kan virke kryptisk, men den indikerer et fundamentalt problem med, hvordan din applikation initialiseres. Lad os dykke ned i, hvad denne fejl betyder, hvorfor den opstår, og vigtigst af alt, hvordan du kan løse den.

Hvad betyder fejlen "Application has not been registered"?

Når din React Native-applikation starter, gennemgår den to primære faser:

1. Indlæsning af JavaScript-kode: Først forsøger React Native at indlæse din applikations JavaScript-bundle. Hvis alt går glat, fortsætter processen.
2. Registrering af applikationen: Efter succesfuld indlæsning af JavaScript-koden, registrerer applikationen sig selv hos det native system (iOS eller Android). Dette trin er essentielt for, at din app kan køre og interagere med enheden.

Fejlen "Application has not been registered" opstår, når det andet trin – registreringen – ikke sker. Det mest almindelige scenarie er, at der opstår en exception (en uventet fejl) i din JavaScript-kode under indlæsningsfasen. Denne fejl forhindrer eksekveringen i at nå det punkt, hvor applikationen kan registrere sig. Med andre ord, fejlen du ser, er ofte et biprodukt af en tidligere, underliggende fejl, som forhindrer registreringen.

Almindelige årsager til fejlen

Der er flere grunde til, at din applikation muligvis ikke bliver registreret korrekt:

1. Tidlige exceptions i JavaScript-koden

Som nævnt er dette den mest hyppige årsag. En fejl i din komponent, en forkert import, eller et problem med en tredjepartsmodul kan forhindre JavaScript-bundle'en i at blive indlæst korrekt. Når dette sker, stopper eksekveringen, før AppRegistry.registerComponent kaldes.

Hvordan finder du den underliggende fejl?

Det er afgørende at kigge i dine logs før du ser selve "Application has not been registered"-fejlen. Udviklingsserveren (Metro) eller enheden/emulatoren vil ofte vise den oprindelige fejlbesked, der førte til dette problem. Almindelige syndere inkluderer:

• Konflikter mellem native moduler: Hvis du har flere versioner af det samme native modul installeret (f.eks. `react-native-safe-area-context`), kan det skabe konflikter, der forhindrer korrekt registrering. Sørg for, at alle dine afhængigheder er opdaterede og konsistente. Brug kommandoer som npm ls react-native-safe-area-context for at tjekke versioner.
• Fejl i `index.js` eller `App.js`: En simpel syntaksfejl, en forkert importsti, eller et problem i din rodbeskrivelse kan forårsage fejlen.

2. Uoverensstemmelse mellem AppKey

React Native bruger en nøgle (typisk "main") til at identificere din applikations hovedkomponent. Denne nøgle skal være konsistent mellem din JavaScript-kode og den native side af applikationen.

I Managed Projects (Expo):

Som standard bruger Expo "main" som AppKey. Dette er automatisk håndteret. Så længe du ikke ændrer "main"-feltet i din `package.json`, bør dette fungere uden problemer. Hvis du ønsker at tilpasse indgangspunktet, kan du bruge registerRootComponent API'en.

I Projects med Native Code:

I din `index.js` fil vil du typisk se noget lignende:

import { AppRegistry } from 'react-native'; import App from './App'; import { name as appName } from './app.json'; AppRegistry.registerComponent(appName, () => App); 

Eller hvis du bruger Expo's `registerRootComponent` i et bare-RN projekt:

import { registerRootComponent } from 'expo'; import App from './App'; registerRootComponent(App); 

I dette tilfælde er `registerRootComponent` ofte defineret som:

function registerRootComponent(component) { AppRegistry.registerComponent('main', () => component); } 

På den native side skal AppKey'en matche:

For iOS (`AppDelegate.m`):

RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"main" initialProperties:nil launchOptions:launchOptions]; 

For Android (`MainActivity.java`):

@Override protected String getMainComponentName() { return "main"; } 

Hvis "main" (eller den AppKey du har defineret) ikke matcher mellem JavaScript og native kode, vil du se denne fejl. Sørg for, at den nøgle, du registrerer i JavaScript, er den samme, som den native kode forventer.

3. Forkert konfiguration i `package.json` eller `app.json`

Fejlen kan også opstå, hvis din `package.json` eller `app.json` ikke er konfigureret korrekt.

• `package.json` - "main" feltet: Dette felt angiver din applikations indgangspunkt. Hvis det peger på en forkert fil, eller filen ikke eksisterer, kan det føre til fejlen. Standard er typisk `index.js`.
• `app.json` - "name" og "displayName": Selvom disse primært påvirker appens navn og identifikator, kan uoverensstemmelser i komplekse opsætninger indirekte bidrage til problemer. Sørg for, at disse er korrekt defineret, især hvis du bruger Expo.

4. Fejl i opgraderingsprocessen

Hvis du lige har opgraderet din React Native-version (f.eks. fra 0.68 til 0.69), kan der være brudte afhængigheder eller ændringer i, hvordan moduler initialiseres. En bruger rapporterede, at efter en opgradering til 0.69, fejlede Android-builds med denne fejl, mens iOS fungerede fint. Dette skyldtes ofte, at Android-specifikke dele af opgraderingen ikke blev korrekt håndteret, eller at native dependencies ikke blev genopbygget korrekt.

Fejlfindingstrin

Her er en systematisk tilgang til at diagnosticere og løse fejlen:

Trin 1: Tjek dine logs!

Dette er det vigtigste skridt. Rul tilbage i din terminal eller udviklerkonsol. Se efter eventuelle fejlmeddelelser, der optrådte før "Application has not been registered". Disse detaljer vil ofte pege direkte på den underliggende årsag.

Trin 2: Verificer din indgangsfil (`index.js`)

Sørg for, at din `index.js` fil eksisterer og indeholder den korrekte kode til at registrere din app. Den skal eksportere din hovedkomponent og kalde `AppRegistry.registerComponent`.

// index.js import { AppRegistry } from 'react-native'; import App from './App'; // Sørg for, at stien er korrekt import { name as appName } from './app.json'; AppRegistry.registerComponent(appName, () => App); 

Trin 3: Tjek AppKey-konsistens

Dobbelttjek, at den AppKey, der bruges i `AppRegistry.registerComponent` (f.eks. "main" eller værdien fra `app.json`), matcher den, der forventes på den native side (i `AppDelegate.m` for iOS og `MainActivity.java` for Android).

Trin 4: Ryd cache og genstart

En beskadiget cache kan ofte forårsage uventede fejl. Prøv at genstarte Metro-bundleren med cache ryddet:

npx react-native start --reset-cache 

Eller for Expo:

npx expo start -c 

Efter at have ryddet cachen, stop den kørende app og start den igen.

Trin 5: Geninstaller `node_modules` og pods

Hvis du har haft problemer med afhængigheder, kan en ren geninstallation hjælpe:

1. Slet `node_modules` mappen.
2. Slet `package-lock.json` eller `yarn.lock` filen.
3. Kør `npm install` eller `yarn install`.
4. Hvis du bruger iOS, kør `cd ios && pod install && cd ..`.
5. Prøv at bygge og køre appen igen.

Trin 6: Tjek native konfiguration (for projekter med native kode)

Hvis du ikke bruger Expo's managed workflow, skal du sikre dig, at dine native filer er korrekte:

• iOS: Åbn dit `.xcworkspace` i Xcode og tjek `AppDelegate.m` for den korrekte `moduleName`.
• Android: Åbn dit projekt i Android Studio og tjek `MainActivity.java` for den korrekte `getMainComponentName()`.

Trin 7: Isoler problemet

Hvis du har mange ændringer, så prøv at isolere problemet. Kommenter nyligt tilføjet kode eller tredjepartsmoduler ud for at se, om fejlen forsvinder. Dette kan hjælpe med at identificere den specifikke del af din kode, der forårsager problemet.

Oversigt over løsninger

Her er en tabel, der opsummerer de mest almindelige løsninger:

Ofte stillede spørgsmål (FAQ)

Hvorfor ser jeg fejlen efter en opgradering?

Opgraderinger kan introducere ændringer i React Native-kernen eller native moduler. Det er vigtigt at følge opgraderingsvejledningen nøje, genkøre `pod install` for iOS, og tjekke for kendte problemer med den nye version.

Kan fejlen skyldes et problem med `App.js`?

Ja, hvis din `App.js` (eller den komponent, der importeres i `index.js`) indeholder en fejl, der forhindrer den i at indlæses korrekt, vil det resultere i denne registreringsfejl.

Hvordan løser jeg det, hvis jeg bruger Expo?

For Expo-projekter, fokuser på at tjekke din `index.js` (eller den fil, du har angivet som indgangspunkt), rydde Expo's cache med `npx expo start -c`, og sørg for, at `package.json` er korrekt konfigureret.

Hvad hvis "main" ikke er den AppKey, jeg bruger?

Hvis du har ændret AppKey'en i din `index.js` (f.eks. `AppRegistry.registerComponent('MyApp', () => App);`), skal du sikre dig, at den native konfiguration matcher "MyApp". Dette er mindre almindeligt, da "main" er standarden.

Ved at følge disse trin og forstå de underliggende årsager, kan du effektivt fejlfinde og løse "Application has not been registered"-fejlen og få din React Native-applikation op at køre igen.