So beheben Sie den Fehler beim "reaktionsnativen Start"

117

  1. Ich habe gerade node.js & cli installiert

    • installierte node.js

    • installierte react-native-cli

      npm -g react-native-cli

  2. Und ein 'neues Projekt' erstellt.

    react-native init new_project

  3. und in diesem 'new_project'-Verzeichnis war ich müde zu sehen, ob der Metro Bundler gut funktioniert.

    react-native start

  4. Aber der Befehl gab mir folgenden Fehler und die U-Bahn startet nicht. Irgendwelche Hinweise zur Behebung dieses Fehlers? (Ich verwende Windows 10 OS.)

    • Befehl : C:\projects\new_proj>react-native start

      Fehler Ungültiger regulärer Ausdruck: /(.\fixtures.|node_modules[‹react[‹dist[‹.|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Nicht terminierte Zeichenklasse. Führen Sie die CLI mit dem Flag --verbose aus, um weitere Informationen zu erhalten. SyntaxError: Ungültiger regulärer Ausdruck: / (. ) bei Blacklist (D: \ projects \ new_proj \ node_modules \ metro-config \ src \ defaults \ blacklist.js: 34: 10) bei getBlacklistRE (D: \ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native -community \ cli \ build \ tools \ loadMetroConfig.js: 69: 59) unter getDefaultConfig (D: \ projects \ new_proj \ knotenmodule \ react-native \ knotenmodule @ react-native-community \ cli \ build \ tools \ loadMetroConfig.js : 85: 20) unter Last (D:

reactjs react-native react-native-android react-native-cli metro-bundler Lied Kevin
quelle
Wie sie sagten Run CLI with --verbose flag for more details.Vielleicht haben Sie vergessen, einem Backslash zu entkommen. Siehe stackoverflow.com/questions/14639339/… . Kann nicht ohne weitere Details sagen.
Hand
Nur für den Fall, dass metro-config in node_modules für Sie nicht vorhanden ist, überprüfen Sie meine Antwort unten.
Gprathour

Antworten:

247

Ich habe heute zum ersten Mal einen ähnlichen Fehler erhalten. Es wird angezeigt \node_modules\metro-config\src\defaults\blacklist.js, dass ein ungültiger regulärer Ausdruck geändert werden muss. Ich habe den ersten Ausdruck unter geändert sharedBlacklistvon:

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

zu:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
Clem
quelle
1
Vielen Dank! Ich habe Änderungen vorgenommen, wie Sie sagten, und es funktioniert jetzt. Muss ich dies bei jedem Projekt ändern oder gibt es eine Möglichkeit, dies global anzuwenden?
Lied Kevin
10
Ich habe eine andere Antwort von der Anfrage auf Github erhalten. - 'Es wird durch den Knoten v12.11.0 verursacht, ein Downgrade auf v12.10.0 wird es lösen.' Es war von Leo.Lei. Und ich muss auch sehen, ob es funktioniert oder nicht.
Lied Kevin
3
Hervorragende Lösung! Vielen Dank. React Native scheint eine solche fehlerhafte Fahrt zu sein, vom beschädigten npm-Cache bis hin zu PERM-Fehlern. Ich habe zwei Tage gebraucht, um es zu installieren.
EdNdee
4
/node_modules[\/\‹react[\/\‹dist[\/\‹.*/, Nur diese Zeile muss geändert werden
vivek
1
Vielen Dank! Das spart mir viel Zeit. Ich habe gerade meine Node.js in dieser Nacht von v8.xx auf v12.13.0 aktualisiert und dann plötzlich diesen Fehler, der zu einem Fehler beim Starten der App führt ... wusste nicht, dass dies durch diesen Fehler ohne diesen Beitrag verursacht wird ...
Garykwwong
106

Dies wird durch den Knoten v12.11.0 verursacht, da er den regulären Standort dort auf zwei Arten behandelt, um dieses Problem zu lösen

Methode I.

Sie können ein Downgrade auf den Knoten v12.10.0 durchführen. Dadurch wird der richtige Umgang mit Analysefehlern angewendet

Methode II

Sie können den regulären Ausdruck in Ihrem Fall korrekt beenden, indem Sie die folgende Datei ändern:

\node_modules\metro-config\src\defaults\blacklist.js

Von:

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

Zu:

 var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
Charles
quelle
2
Das ist super hilfreich, könnt ihr nicht eine Pull-Anfrage einreichen? zu metro-configoder expo-cli?
its4zahoor
1
Eine Pull-Anfrage wurde bereits im Oktober eingereicht: github.com/facebook/metro/commit/…
schellack
20

[Schnelle Antwort]

Es gibt ein Problem mit Metro bei der Verwendung einiger NPM- und Node-Versionen.

Sie können das Problem beheben, indem Sie Code in der Datei ändern \node_modules\metro-config\src\defaults\blacklist.js.

Suchen Sie diese Variable:

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

und ändern Sie dies:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

Bitte beachten Sie, dass Sie den Code erneut ändern müssen, wenn Sie eine npm-Installation oder eine Garninstallation ausführen.

Javier C.
quelle
Kann dieses Problem von Entwicklern nicht behoben werden? Jedes Mal, wenn ich hierher komme. Vielen Dank, Sir
Hasan Basri
1
Ja, das Problem kann von U-Bahn-Entwicklern behoben werden, die diese Änderungen vornehmen.
Javier C.
2
Danke dir! Das hat es behoben!
Robert
Ich denke nicht, dass dies eine gute Lösung ist. Ändern von Dateien in node_modules
CodeMind
1
Beachten Sie, dass bei Verwendung einer alten Version von react-native (z. B. 0.51.0) die zu ändernde Datei stattdessen wie .\node_modules\metro-bundler\src\blacklist.js
folgt
20

Sie haben zwei Lösungen:

Entweder führen Sie ein Downgrade des Knotens auf V12.10.0 durch, oder Sie können diese Datei für jedes zu erstellende Projekt ändern.

node_modules / metro-config / src / defaults / blacklist.js Ändern Sie Folgendes :

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

dazu:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
Hasan Zahran
quelle
8

Ich hatte das gleiche Problem, das ich in meinem Projekt mit E: \ NodeJS \ ReactNativeApp \ ExpoTest \ node_modules \ metro-config \ src \ defaults \ blacklist.js geändert habe

von 

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
 /heapCapture\/bundle\.js/,
 /.*\/__tests__\/.*/
];

zu

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

das hat bei mir perfekt funktioniert

nelajala nelajala
quelle
5

Ein PR mit einem Fix wurde im Metro- Repository zusammengeführt. Jetzt müssen wir nur noch bis zur nächsten Veröffentlichung warten. Im Moment ist die beste Option ein Downgrade auf NodeJS v12.10.0. Wie Brandon betonte, ist es node_modules/eine wirklich schlechte Praxis , irgendetwas in is zu ändern, und es wird keine endgültige Lösung sein.

JoseLion
quelle
5

Ich habe keine Metro-Konfiguration in meinem Projekt, was nun?

Ich habe festgestellt, dass es in einem ziemlich älteren Projekt kein metro-configIn gibt node_modules. Wenn es bei Ihnen der Fall ist, dann

Gehen Sie zu node_modules / metro-bundler / src / blacklist.js

Und machen Sie den gleichen Schritt wie in anderen Antworten erwähnt, dh

Ersetzen

var sharedBlacklist = [
    /node_modules[/\\]react[/\\]dist[/\\].*/,
    /website\/node_modules\/.*/,
    /heapCapture\/bundle\.js/,
    /.*\/__tests__\/.*/
];

mit

var sharedBlacklist = [
    /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
    /website\/node_modules\/.*/,
    /heapCapture\/bundle\.js/,
    /.*\/__tests__\/.*/
];

PS Ich war in einigen Projekten mit der gleichen Situation konfrontiert, daher dachte ich, dass das Teilen jemandem helfen könnte.

Bearbeiten

Laut Kommentar von @beltrone könnte die Datei auch in vorhanden sein,

node_modules \ metro \ src \ blacklist.js

gprathour
quelle
1
Hat geholfen, aber die Datei in meinem 360-Init ist in MyProject\node_modules\metro\src\blacklist.js. Prost.
Beltrone
4

Ich habe das gleiche Problem.

„Fehler Ungültiger regulärer Ausdruck:. / ( \ Armaturen . \ | node_modules [\] reagieren [\] dist [\]. | Website \ node_modules \. | heapCapture \ bundle.js |. \ Tests \. ) $ /: Unterminated Zeichenklasse. "

Ändern Sie den regulären Ausdruck in \node_modules\metro-config\src\defaults\blacklist.js

Von

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

Zu

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

Diese Änderung hat meinen Fehler behoben.

Mischan Madhupa
quelle
3

https://github.com/facebook/metro/issues/453

Für diejenigen, die diesen Fehler immer noch ohne offiziellen Patch in React-Native, Expo erhalten

Verwenden Sie Garn und fügen Sie diese Einstellung in package.json hinzu

{
  ...
  "resolutions": {
    "metro-config": "bluelovers/metro-config-hotfix-0.56.x"
  },
 ...
bluelovers
quelle
2

Gehe zu

\ node_modules \ metro-config \ src \ defaults \ blacklist.js

und ersetzen Sie diese

var sharedBlacklist = [
/node_modules[/\\]react[/\\]dist[/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];

zu

var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];

Dies ist keine bewährte Methode, und meine Empfehlung lautet: Downgrade der Knotenversion auf 12.9 ODER Aktualisierung der Metro-Konfiguration, da das Knotenproblem behoben wird.

Lahiru Amarathunge
quelle
1

Sie können gehen zu ...

\ node_modules \ metro-config \ src \ defaults \ blacklist.js und ändern ...

var sharedBlacklist = [   /node_modules[/\\]react[/\\]dist[/\\].*/,  
/website\/node_modules\/.*/,   /heapCapture\/bundle\.js/,  
/.*\/__tests__\/.*/ ];

dafür:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
Leonel Veliz Aponte
quelle
0

In der Regel ändere ich keine Dateien innerhalb node_modules/(oder irgendetwas, das nicht als Teil eines Repositorys festgeschrieben wird), da sie beim nächsten Bereinigen, Erstellen oder Aktualisieren zurückgeführt werden. Ich habe es definitiv in der Vergangenheit getan und es hat mich ein paar Mal gebissen. Dies funktioniert jedoch als kurzfristiger / lokaler Entwickler-Fix, bis / sofern nicht metro-configaktualisiert wird.

Vielen Dank!

Brandon Gohsman
quelle
0

Ich fand die regexp.source geändert von node v12.11.0, möglicherweise die neue v8Engine verursacht. Weitere Informationen finden Sie unter https://github.com/nodejs/node/releases/tag/v12.11.0 .

D:\code\react-native>nvm use 12.10.0
Now using node v12.10.0 (64-bit)

D:\code\react-native>node
Welcome to Node.js v12.10.0.
Type ".help" for more information.
> /node_modules[/\\]react[/\\]dist[/\\].*/.source
'node_modules[\\/\\\\]react[\\/\\\\]dist[\\/\\\\].*'
> /node_modules[/\\]react[/\\]dist[/\\].*/.source.replace(/\//g, path.sep)
'node_modules[\\\\\\\\]react[\\\\\\\\]dist[\\\\\\\\].*'
>
(To exit, press ^C again or ^D or type .exit)
>

D:\code\react-native>nvm use 12.11.0
Now using node v12.11.0 (64-bit)

D:\code\react-native>node
Welcome to Node.js v12.11.0.
Type ".help" for more information.
> /node_modules[/\\]react[/\\]dist[/\\].*/.source
'node_modules[/\\\\]react[/\\\\]dist[/\\\\].*'
> /node_modules[/\\]react[/\\]dist[/\\].*/.source.replace(/\//g, path.sep)
'node_modules[\\\\\\]react[\\\\\\]dist[\\\\\\].*'
>
(To exit, press ^C again or ^D or type .exit)
>

D:\code\react-native>nvm use 12.13.0
Now using node v12.13.0 (64-bit)

D:\code\react-native>node
Welcome to Node.js v12.13.0.
Type ".help" for more information.
> /node_modules[/\\]react[/\\]dist[/\\].*/.source
'node_modules[/\\\\]react[/\\\\]dist[/\\\\].*'
> /node_modules[/\\]react[/\\]dist[/\\].*/.source.replace(/\//g, path.sep)
'node_modules[\\\\\\]react[\\\\\\]dist[\\\\\\].*'
>
(To exit, press ^C again or ^D or type .exit)
>

D:\code\react-native>nvm use 13.3.0
Now using node v13.3.0 (64-bit)

D:\code\react-native>node
Welcome to Node.js v13.3.0.
Type ".help" for more information.
> /node_modules[/\\]react[/\\]dist[/\\].*/.source
'node_modules[/\\\\]react[/\\\\]dist[/\\\\].*'
> /node_modules[/\\]react[/\\]dist[/\\].*/.source.replace(/\//g, path.sep)
'node_modules[\\\\\\]react[\\\\\\]dist[\\\\\\].*'
>
Donghua Liu
quelle
0

Beheben Sie das Problem, indem Sie metro-config der neuesten Version (vorerst 0.57.0) installieren. Sie hatten das Problem behoben:

npm install metro-config

Sie können es später entfernen, nachdem reaktionsnative Leute die Modulversionen aktualisiert haben

KEMBL
quelle
Das hilft mir nicht.
Velizar Andreev Kitanov
0

Die Verwendung von Garn verhindert diese Situation. Garn sollte verwenden

Gucal
quelle
0

Unter Windows 10 empfehle ich dringend, Linux Bash Shell zu installieren.

Hier ist eine nette Anleitung zum Einrichten: https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/

Befolgen Sie einfach die Schritte, wählen Sie Ihre Linux-Distribution aus und vermeiden Sie so viel Arbeit wie möglich mit Node on Cmd, da dies offensichtlich instabil ist.

Beachten Sie, dass Microsoft nachdrücklich davor warnt, Linux-Dateien mit Windows-Software hinzuzufügen oder zu ändern , wie hier beschrieben: howtogeek.com/261383/how-to-access-your-ubuntu-bash-files-in-windows-and-your-windows- System-Drive-In-Bash /

Ich hoffe es hilft!

Avatazjoe
quelle
0

Ich habe gerade package.json aktualisiert, um von zu ändern

"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz"

zu

"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz"

Es scheint, dass das Problem in SDK-36 nicht auftreten wird !!

Meine Knotenversion ist v12.16.0 und os ist win10 .

Anson
quelle
0

Die Lösung ist einfach, aber vorübergehend ...

Beachten Sie, dass Sie den Code erneut ändern müssen , wenn Sie ein npm installoder ein yarn installausführen!

Wie können wir das automatisch ausführen?

Permanente Lösung

Um dies "automatisch" nach der Installation Ihrer Knotenmodule zu tun, können Sie verwenden patch-package.

  1. metro-configKorrigieren Sie die Datei und beheben Sie den Fehler:

Die Datei wird in angezeigt \node_modules\metro-config\src\defaults\blacklist.js.

Bearbeiten von:

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

Zu: 

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
  1. Generieren Sie dann eine permanente Patch-Datei:

npx patch-package metro-config

  1. In Ihrem package.jsonTrigger der Patch:
"scripts": {
+  "postinstall": "npx patch-package"
}

Alles erledigt! Jetzt wird dieser Patch bei jedem npm install/ erstelltyarn install .

Vielen Dank an https://github.com/ds300/patch-package

Maycon Mesquita
quelle