Jak rozwiązać problem dotyczący „startu w trybie natywnym reagowania”

117
  1. Właśnie zainstalowałem node.js i cli

    • zainstalowany node.js
    • Zainstalowany respond-native-cli

      npm -g react-native-cli
  2. I stworzył „nowy projekt”.

    react-native init new_project
  3. a wewnątrz tego katalogu „new_project” zmęczono mnie, aby sprawdzić, czy pakiet oprogramowania Metro działa dobrze.

    react-native start
  4. Ale komenda dała mi następujący błąd i metro się nie uruchamia. Jakaś wskazówka, jak naprawić ten błąd? (Używam systemu operacyjnego Windows 10).

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

      error Invalid regular expression: /(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Unterminated character class. Aby uzyskać więcej informacji, uruchom CLI z flagą --verbose. SyntaxError: Invalid regular expression: /(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Nieskończona klasa postaci w nowym RegExp ( ) na czarnej liście (D: \ projects \ new_proj \ node_modules \ metro-config \ src \ defaults \ blacklist.js: 34:10) w getBlacklistRE (D: \ projects \ new_proj \ node_modules \ respons-native \ node_modules @active-native -community \ cli \ build \ tools \ loadMetroConfig.js: 69: 59) w getDefaultConfig (D: \ projects \ new_proj \ node_modules \ respons-native \ node_modules @ respons-native-community \ cli \ build \ tools \ loadMetroConfig.js : 85:20) przy obciążeniu (D:

Song Kevin
źródło
Jak stwierdzili Run CLI with --verbose flag for more details.Być może zapomniałeś uciec przed ukośnikiem. Zobacz stackoverflow.com/questions/14639339/… . Nie mogę powiedzieć bez więcej szczegółów.
rhand
Na wypadek, gdybyś metro-config nie istniał w node_modules, sprawdź moją odpowiedź poniżej.
gprathour

Odpowiedzi:

251

Właśnie dzisiaj po raz pierwszy wystąpił podobny błąd. Pojawia się w \node_modules\metro-config\src\defaults\blacklist.js, istnieje nieprawidłowe wyrażenie regularne, które wymagało zmiany. Zmieniłem pierwsze wyrażenie pod sharedBlacklistz:

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

do:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
Clem
źródło
1
Dziękuję Ci bardzo! Wprowadziłem zmiany, jak powiedziałeś, i teraz działa. Czy muszę to modyfikować w każdym projekcie, czy jest sposób, aby zastosować to globalnie?
Song Kevin
11
Mam inną odpowiedź z zapytania na Githubie. - „Jest to spowodowane przez węzeł w wersji 12.11.0, zmiana na wersję 12.10.0 rozwiąże problem”. To było od Leo.Lei. Muszę też sprawdzić, czy to działa, czy nie.
Song Kevin,
3
Doskonała poprawka! Wielkie dzięki. React Native wygląda na taką wadliwą jazdę, od uszkodzonej pamięci podręcznej npm do błędów PERM. Instalacja zajęła mi dwa dni.
EdNdee
4
/node_modules[\/\]react[\/\]dist[\/\].*/, Tylko ta linia wymaga zmiany
vivek
1
Wielkie dzięki! Oszczędza mi to dużo czasu. Właśnie zaktualizowałem mój Node.js z v8.xx do v12.13.0 tej nocy, a potem nagle ten błąd, który prowadzi do niepowodzenia uruchamiania aplikacji ... nie wiedziałem, że jest to spowodowane przez ten błąd bez tego postu ...
garykwwong
107

Jest to spowodowane przez węzeł w wersji 12.11.0 ze względu na sposób, w jaki obsługuje on regularne lokalizacje na dwa sposoby rozwiązania tego problemu

Metoda I

Możesz przejść na starszą wersję węzła 12.10.0, co spowoduje poprawny sposób radzenia sobie z błędem przetwarzania

Metoda II

W twoim przypadku możesz poprawnie zakończyć wyrażenie regularne, zmieniając plik znajdujący się a:

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

Z:

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

Do:

 var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
Charles
źródło
2
to jest bardzo pomocne, czy nie możecie przesłać żądania ściągnięcia? do metro-configlub expo-cli?
its4zahoor
1
Żądanie wycofania zostało przesłane w październiku: github.com/facebook/metro/commit/ ...
schellack,
20

[Szybka odpowiedź]

Wystąpił problem z Metro podczas korzystania z niektórych wersji NPM i Node.

Możesz rozwiązać problem, zmieniając kod w pliku \node_modules\metro-config\src\defaults\blacklist.js.

Wyszukaj tę zmienną:

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

i zmień na to:

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

Pamiętaj, że jeśli uruchomisz instalację npm lub instalację przędzy, musisz ponownie zmienić kod.

Javier C.
źródło
Czy tego problemu nie mogą rozwiązać programiści? Za każdym razem, gdy tu przychodzę. Dzięki Sir
Hasan Basri
1
Tak, problem może zostać rozwiązany przez deweloperów metra, którzy wprowadzają te zmiany.
Javier C.
2
Dziękuję Ci! To naprawiło!
Robert
Nie sądzę, żeby to było dobre rozwiązanie. modyfikowanie plików wewnątrz node_modules
CodeMind
1
Zwróć uwagę, że jeśli używasz starej wersji React-Native (np. 0.51.0), plik do zmiany znajduje się pod adresem:.\node_modules\metro-bundler\src\blacklist.js
Venryx
20

Masz dwa rozwiązania:

albo obniżysz węzeł do wersji 12.10.0, albo możesz zmodyfikować ten plik dla każdego projektu, który utworzysz.

node_modules / metro-config / src / defaults / blacklist.js Zmień to:

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

do tego:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
Hasan Zahran
źródło
8

Miałem ten sam problem, który zmieniłem E: \ NodeJS \ ReactNativeApp \ ExpoTest \ node_modules \ metro-config \ src \ defaults \ blacklist.js w moim projekcie

z

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

do

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

to działało idealnie dla mnie

nelajala nelajala
źródło
5

W repozytorium Metro został scalony PR z poprawką . Teraz musimy tylko poczekać do następnego wydania. Na razie najlepszą opcją jest przejście na NodeJS . Jak zauważył Brandon , modyfikowanie czegokolwiek jest naprawdę złą praktyką i nie będzie ostatecznym rozwiązaniem.v12.10.0node_modules/

JoseLion
źródło
5

Nie mam programu Metro-config w swoim projekcie, co teraz?

I odkryli, że w całkiem starszego projektu tam nie ma metro-configw node_modules. Jeśli tak jest w Twoim przypadku,

Przejdź do node_modules / metro-bundler / src / blacklist.js

I wykonaj ten sam krok, jak wspomniano w innych odpowiedziach, tj

Zastąpić

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

z

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

PS Miałem tę samą sytuację w kilku projektach, więc myślenie, że podzielenie się tym może komuś pomóc.

Edytować

Zgodnie z komentarzem @beltrone plik może również istnieć w,

node_modules \ metro \ src \ blacklist.js

gprathour
źródło
1
Pomogło, ale plik w mojej inicjalizacji 360 jest w formacie MyProject\node_modules\metro\src\blacklist.js. Twoje zdrowie.
beltrone
4

Mam ten sam problem.

"błąd Nieprawidłowe wyrażenie regularne: / (. \ fixtures \. | node_modules [\] respond [\] dist [\]. | website \ node_modules \. | heapCapture \ bundle.js |. \ tests \. ) $ /: Niezakończony klasa postaci ”.

Zmień wyrażenie regularne w \node_modules\metro-config\src\defaults\blacklist.js

Z

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

Do

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

Ta zmiana rozwiązała mój błąd.

Mishan Madhupa
źródło
3

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

dla tych, którzy nadal otrzymują ten błąd bez oficjalnej łatki w native, expo

użyj przędzy i dodaj to ustawienie do pliku package.json

{
  ...
  "resolutions": {
    "metro-config": "bluelovers/metro-config-hotfix-0.56.x"
  },
 ...
bluelovers
źródło
2

Iść do

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

i wymień to

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

do

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

To nie jest najlepsza praktyka i moja rekomendacja to: obniż wersję węzła do 12.9 LUB zaktualizuj metro-config, ponieważ naprawiają problem z węzłem.

Lahiru Amarathunge
źródło
1

Możesz iść do...

\ node_modules \ metro-config \ src \ defaults \ blacklist.js i zmień ...

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

dla tego:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
Leonel Veliz Aponte
źródło
0

Zasadniczo nie modyfikuję plików w obrębie node_modules/(ani niczego, co nie zostanie zatwierdzone jako część repozytorium), ponieważ następne czyszczenie, kompilacja lub aktualizacja spowoduje ich regres. Zdecydowanie robiłem to w przeszłości i ugryzło mnie to kilka razy. Ale to działa jako krótkoterminowa / lokalna poprawka deweloperska do / chyba że metro-configzostanie zaktualizowana.

Dzięki!

Brandon Gohsman
źródło
0

Znalazłem zmienione źródło regexp.source node v12.11.0, być może v8spowodował to nowy silnik. zobacz więcej na 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
źródło
0

Napraw to, instalując metro-config najnowszej wersji (na razie 0.57.0), naprawili problem:

npm zainstaluj metro-config

możesz go później usunąć, po tym jak reaktywni goście zaktualizują wersje modułów

KEMBL
źródło
To mi nie pomaga.
Velizar Andreev Kitanov
0

Użycie przędzy zapobiega takiej sytuacji. Przędza powinna używać

Gucal
źródło
0

W systemie Windows 10 bardzo polecam zainstalowanie powłoki Linux Bash Shell.

Oto fajny przewodnik, jak to skonfigurować: https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/

po prostu postępuj zgodnie z instrukcjami, wybierz dystrybucję Linuksa i unikaj jak największej ilości pracy z node na cmd, ponieważ jest to oczywista niestabilność.

Weź pod uwagę Microsoft zdecydowanie ostrzega przed dodawaniem lub modyfikowaniem plików Linuksa za pomocą oprogramowania Windows, jak opisano tutaj: howtogeek.com/261383/how-to-access-your-ubuntu-bash-files-in-windows-and-your-windows- system-drive-in-bash /

Mam nadzieję, że to pomoże!

Avatazjoe
źródło
0

Właśnie zaktualizowałem package.json do zmiany

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

do

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

Wygląda na to, że problem nie wystąpi w sdk-36 !!

Wersja mojego węzła to 12.16.0, a system operacyjny to win10 .

anson
źródło
0

Rozwiązanie jest proste, ale tymczasowe ...

Zauważ, że jeśli uruchomić npm installlubyarn install , musisz ponownie zmienić kod!

Jak więc możemy to uruchomić automatycznie?

Stałe rozwiązanie

Aby zrobić to „automagicznie” po zainstalowaniu modułów węzłów, możesz użyć patch-package.

  1. Napraw metro-configplik, rozwiązując błąd:

Plik pojawi się w formacie \node_modules\metro-config\src\defaults\blacklist.js .

Edytuj od:

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

Do:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
  1. Następnie wygeneruj stały plik poprawki:

npx patch-package metro-config

  1. W twoim package.jsonwyzwalaczu patch:
"scripts": {
+  "postinstall": "npx patch-package"
}

Gotowe! Teraz ta poprawka zostanie wprowadzona na każdym npm install/yarn install .

Dzięki https://github.com/ds300/patch-package

Maycon Mesquita
źródło