Bearbeiten

Metro-Konfiguration für Out-of-Tree-Plattformen

Einrichtung und Diagnose von Problemen mit der Metro-Konfiguration für react-native-macos und react-native-windows. Viele der Anweisungen in diesem Dokument beziehen sich möglicherweise nur auf react-native-windows, aber die Schritte gelten gleichermaßen für react-native-macos.

Versionsanforderungen

Die hier enthaltenen Informationen gelten nur für Versionen von react-native-macos >=0.62.11 und react-native-windows >=0.62.0. Außerdem ist @react-native-community/cli >=4.9.0 erforderlich. Ältere Versionen erfordern eine wesentlich komplexere Konfiguration, die in diesem Dokument nicht behandelt wird.

Was muss die Metro-Konfiguration für macOS/Windows leisten?

react-native-macos und react-native-windows stellen eine Implementierung für react-native bereit, indem sie eine zusätzliche Kopie der JavaScript-Dateien von react-native bereitstellen, die ihre jeweiligen Plattformen implementieren. Dieser JavaScript-Code ist nicht im react-native-Paket enthalten. Wenn Sie normalerweise ein import from 'react-native' ausführen, sucht Metro nach node_modules/react-native irgendwo im Dateipfad, um dieses Modul zu finden. Unglücklicherweise gibt dies bei Verwendung von react-native-macos oder react-native-windows den falschen JavaScript-Code zurück. Eine einfache Lösung könnte darin bestehen, eine Metro-Konfiguration hinzuzufügen, die Folgendes enthält:

resolver {
    extraNodeModules: {
        'react-native': <path-to-react-native-windows>
    }
}

Während dies Metro ermöglichen würde, die richtigen JavaScript-Dateien beim Erstellen eines Windows-Bundles zu finden, würde diese Konfiguration nicht für macOS oder iOS und Android funktionieren. Stattdessen benötigen wir wirklich, dass Metro react-native unterschiedlich auflöst, abhängig von der gerade gebündelten Plattform.

Die Lösung besteht darin, Metro einen benutzerdefinierten Resolver bereitzustellen, der die aktuell aufgelöste Plattform berücksichtigt. Ab @react-native-community/cli@4.9.0 wurde eine Änderung an der React Native CLI vorgenommen, um Metro mit einem benutzerdefinierten Resolver zu konfigurieren, der genau das tut.

Diagnose von Metro-Konfigurationsproblemen

Die übliche Art, wie diese auftreten, ist ein Fehler wie zum Beispiel:

Error: Unable to resolve module `./Libraries/Components/AccessibilityInfo/AccessibilityInfo` from <Some file path here>

Meistens schlägt ein Import von AccessibilityInfo fehl. Das liegt daran, dass dies das erste Modul ist, das react-native selbst zu laden versucht, welches nur eine .ios und eine .android Version der Datei innerhalb von react-native enthält.

Metro-Cache zurücksetzen

Manchmal, nach dem Aktualisieren von Paketversionen oder dem Ändern Ihrer Metro-Konfiguration, kann der Metro-Cache aus dem Gleichgewicht geraten. Eine einfache Sache, die Sie versuchen können, ist das Zurücksetzen des Dateicaches von Metro. Dies kann durch Ausführen von yarn start --reset-cache geschehen.

Überprüfen, ob die Plattform installiert und in die CLI integriert ist

Führen Sie npx react-native config aus. Betrachten Sie die Ausgabe und überprüfen Sie, ob die JSON entweder die Eigenschaft platforms.macos.npmPackageName oder die Eigenschaft platforms.windows.npmPackageName (oder beide) enthält, abhängig von der verwendeten Plattform.

{
    ...
    "platforms": {
      "ios": {},
      "android": {},
      "macos": {
        "npmPackageName": "react-native-macos"
      },
      "windows": {
        "npmPackageName": "react-native-windows"
      }
    },
    ...
}

Bei Verwendung eines Mono-Repos: Stellen Sie sicher, dass react-native-macos/react-native-windows nicht in Ihrer exclusionList enthalten ist

Sie können node -p require.resolve('react-native-windows') ausführen, wenn Sie sich nicht sicher sind, wo react-native-windows installiert ist. Stellen Sie sicher, dass der Ordner react-native-windows nicht in der exclusionList in Ihrer metro.config.js enthalten ist.

Stellen Sie sicher, dass react-native-macos/react-native-windows in Ihren watchFolders enthalten ist

Standardmäßig erkennt die Metro-Konfiguration alle Dateien im Ordner Ihres Pakets. Viele Paketmanager, insbesondere bei der Ausführung in Mono-Repos (yarn workspaces etc.), bündeln Pakete an einem Ort außerhalb der lokalen Dateistruktur des Pakets. In diesem Fall müssen Sie möglicherweise zusätzliche Ordner zur Metro-Überwachungsliste hinzufügen. Dies kann durch Hinzufügen zur Metro-Konfiguration erfolgen.

  watchFolders: [
    // Include hoisted modules
    path.resolve(__dirname, '../..', 'node_modules'),
  ],

Der obige Dateipfad sollte den Pfad zu react-native-windows enthalten, der von node -p require.resolve('react-native-windows') zurückgegeben wird.

Wenn Ihre Einrichtung Symlinks enthält

Verschiedene Paketmanager können Symlinks innerhalb von node_modules erstellen. Metro unterstützt das Folgen von Symlinks nicht. Wenn node_modules/react-native-windows ein Symlink ist, kann Metro es nicht finden. Wenn das der Fall ist, können Sie Folgendes hinzufügen:

resolver {
    extraNodeModules: {
        'react-native-windows': <path-to-react-native-windows>
    }
}

zu Ihrer Metro-Konfiguration, um Metro über den tatsächlichen Speicherort von react-native-windows zu informieren.

Cache erneut zurücksetzen

Wenn Sie diese Schritte in der Reihenfolge befolgt haben, haben Sie wahrscheinlich eine Menge Änderungen an Ihrer Metro-Konfigurationsdatei vorgenommen. Haben Sie versucht, den Metro-Cache erneut zurückzusetzen? yarn start --reset-cache