Come risolvere l'errore su 'React-Native Start'

117

  1. Ho appena installato node.js e cli

    • installato node.js

    • installato react-native-cli

      npm -g react-native-cli

  2. E ha creato un "nuovo progetto".

    react-native init new_project

  3. e all'interno di quella directory "new_project", mi sono stancato di vedere se metro bundler funziona bene.

    react-native start

  4. Ma il comando mi ha dato un errore di inseguimento e la metropolitana non si avvia. Qualche indizio per correggere questo errore? (Sto usando il sistema operativo Windows 10.)

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

      errore Espressione regolare non valida: /(.\fixtures.|node_modules[”react[”dist[”.|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: classe di caratteri non terminata. Eseguire la CLI con il flag --verbose per maggiori dettagli. SyntaxError: Espressione regolare non valida: /(.\fixtures.|node_modules[”react[”dist[”.|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Classe di caratteri non terminata alla nuova RegExp ( ) in blacklist (D: \ projects \ new_proj \ node_modules \ metro-config \ src \ defaults \ blacklist.js: 34: 10) su getBlacklistRE (D: \ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native -community \ cli \ build \ tools \ loadMetroConfig.js: 69: 59) su getDefaultConfig (D: \ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native-community \ cli \ build \ tools \ loadMetroConfig.js : 85: 20) sotto carico (D:

reactjs  react-native  react-native-android  react-native-cli  metro-bundler 
— Song Kevin
fonte
Come hanno affermato Run CLI with --verbose flag for more details.Forse ti sei dimenticato di sfuggire a una barra rovesciata. Vedi stackoverflow.com/questions/14639339/… . Non posso dire senza ulteriori dettagli.
— 1919
Nel caso in cui metro-config non esista in node_modules per te, controlla la mia risposta di seguito.
— gprathour

Risposte:

250

Oggi ho ricevuto un errore simile per la prima volta. Appare in \node_modules\metro-config\src\defaults\blacklist.js, c'è un'espressione regolare non valida che doveva essere modificata. Ho cambiato la prima espressione sotto sharedBlacklistda:

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

per:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
— Clem
fonte
1
Grazie mille! Ho apportato modifiche come hai detto e ora funziona. Devo modificarlo su ogni progetto o c'è un modo per applicarlo a livello globale?
— Song Kevin,
11
Ho ricevuto un'altra risposta dalla domanda su GitHub. - "È causato dal nodo v12.11.0, il downgrade a v12.10.0 lo risolverà." Era di Leo.Lei. E ho anche bisogno di vedere se funziona o no.
— Song Kevin,
3
Soluzione eccellente! Molte grazie. React Native sembra un tale giro di buggy, dalla cache npm corrotta, agli errori PERM. Mi ci sono voluti due giorni solo per l'installazione.
— EdNdee
4
/node_modules[\/\”react[\/\”dist[\/\”.*/, Solo questa riga deve essere modificata
— vivek
1
Molte grazie! Mi fa risparmiare molto tempo. Ho appena aggiornato il mio Node.js da v8.xx a v12.13.0 questa notte e poi questo errore all'improvviso che porta al fallimento dell'avvio dell'app ... non sapevo che fosse la causa di questo bug senza questo post ...
— garykwwong
107

Ciò è causato dal nodo v12.11.0 a causa del modo in cui gestisce la posizione regolare, esistono due modi per risolvere questo problema

Metodo I.

È possibile eseguire il downgrade al nodo v12.10.0 in questo modo verrà applicato il modo corretto per gestire l'errore di analisi

Metodo II

Puoi terminare correttamente l'espressione regolare nel tuo caso modificando il file situato a:

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

A partire dal:

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

Per:

 var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
— Charles
fonte
2
questo è molto utile, non potete inviare una richiesta pull? a metro-configo expo-cli?
— its4zahoor
1
A ottobre è stata inviata una richiesta di pull: github.com/facebook/metro/commit/…
— schellack
20

[Risposta rapida]

Si è verificato un problema con Metro che utilizza alcune versioni di NPM e Node.

Puoi risolvere il problema cambiando parte del codice nel file \node_modules\metro-config\src\defaults\blacklist.js.

Cerca questa variabile:

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

e cambia in questo:

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

Si noti che se si esegue un'installazione npm o un'installazione filata è necessario modificare nuovamente il codice.

— Javier C.
fonte
Questo problema non può essere risolto dagli sviluppatori? Ogni volta che vengo qui. Grazie Signore
— Hasan Basri
1
Sì, il problema può essere risolto dagli sviluppatori della metropolitana che eseguono queste modifiche.
— Javier C.
2
Grazie! Questo l'ha risolto!
— Robert
Non penso che questa sia una buona soluzione. modifica dei file all'interno di node_modules
— CodeMind
1
Nota che se stai usando una vecchia versione di react-native (es. 0.51.0), il file da modificare è invece a:.\node_modules\metro-bundler\src\blacklist.js
— Venryx
20

Hai due soluzioni:

o esegui il downgrade del nodo alla V12.10.0 oppure puoi modificare questo file per ogni progetto che creerai.

node_modules / metro-config / src / defaults / blacklist.js Cambia questo:

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

a questa:

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

Ho avuto lo stesso problema che ho modificato E: \ NodeJS \ ReactNativeApp \ ExpoTest \ node_modules \ metro-config \ src \ defaults \ blacklist.js nel mio progetto

a partire dal 

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

per

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

Ha funzionato perfettamente per me

— nelajala nelajala
fonte
5

Un PR con una correzione è stato unito nel repository metro . Ora dobbiamo solo aspettare fino alla prossima versione. Per ora l'opzione migliore è eseguire il downgrade a NodeJS v12.10.0. Come ha sottolineato Brandon , modificare qualsiasi cosa node_modules/è davvero una cattiva pratica e non sarà una soluzione definitiva.

— JoseLion
fonte
5

Non ho metro-config nel mio progetto, e adesso?

Ho scoperto che nel progetto abbastanza vecchio non c'è metro-configin node_modules. Se è il tuo caso, allora,

Vai a node_modules / metro-bundler / src / blacklist.js

E fai lo stesso passo come menzionato in altre risposte, cioè

Sostituire

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

con

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

PS Ho affrontato la stessa situazione in un paio di progetti, quindi ho pensato che condividerla potesse aiutare qualcuno.

modificare

Secondo il commento di @beltrone il file potrebbe esistere anche in,

node_modules \ metro \ src \ blacklist.js

— gprathour
fonte
1
Ha aiutato, ma il file nel mio 360 init è in formato MyProject\node_modules\metro\src\blacklist.js. Saluti.
— beltrone
4

Ho lo stesso problema.

"errore Espressione regolare non valida: / (. \ fixtures \. | node_modules [\] react [\] dist [\]. | website \ node_modules \. | heapCapture \ bundle.js |. \ tests \. ) $ /: Unterminated classe di caratteri. "

Cambia l'espressione regolare in \node_modules\metro-config\src\defaults\blacklist.js

A partire dal

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

Per

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

Questa modifica ha risolto il mio errore.

— Mishan Madhupa
fonte
2

Vai a

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

e sostituiscilo

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

per

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

Questa non è una best practice e il mio consiglio è: downgrade della versione del nodo alla 12.9 OPPURE aggiornare metro-config poiché stanno risolvendo il problema del nodo.

— Lahiru Amarathunge
fonte
1

Puoi andare a...

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

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

per questo:

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

Come regola generale, non modifico i file all'interno node_modules/(o qualsiasi cosa che non venga impegnata come parte di un repository) poiché il successivo clean, build o update li regredirà. Sicuramente l'ho fatto in passato e mi ha morso un paio di volte. Ma questo funziona come una correzione di sviluppo locale / a breve termine fino a quando / a meno che non metro-configvenga aggiornato.

Grazie!

— Brandon Gohsman
fonte
0

Ho scoperto che regexp.source è cambiato da node v12.11.0, forse il nuovo v8motore ha causato. vedere di più su 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
fonte
0

Risolvilo installando metro-config dell'ultima versione (0.57.0 per ora) avevano risolto il problema:

npm installa metro-config

puoi rimuoverlo in seguito, dopo che i ragazzi dei nativi di reazione hanno aggiornato le versioni del modulo

— KEMBL
fonte
Questo non mi aiuta.
— Velizar Andreev Kitanov
0

L'uso del filo evita questa situazione. Il filato dovrebbe usare

— Gucal
fonte
0

Su Windows 10 consiglio vivamente di installare Linux Bash Shell.

Ecco una bella guida per configurarlo: https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/

basta seguire i passaggi, scegliere la propria distribuzione linux ed evitare il più possibile di lavorare con node su cmd data un'evidente instabilità.

Prendi in considerazione che Microsoft mette in guardia contro l'aggiunta o la modifica di file Linux con il software Windows, come descritto qui: howtogeek.com/261383/how-to-access-your-ubuntu-bash-files-in-windows-and-your-windows- sistema drive-in-bash /

Spero che sia d'aiuto!

— Avatazjoe
fonte
0

Ho appena aggiornato package.json per passare da

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

per

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

Sembra che il problema non si verifichi in sdk-36 !!

La mia versione del nodo è v12.16.0 e il sistema operativo è win10 .

— Anson
fonte
0

La soluzione è semplice, ma temporanea ...

Nota che se esegui an npm installo a yarn installdevi cambiare di nuovo il codice!

Quindi, come possiamo eseguirlo automaticamente?

Soluzione permanente

Per farlo "automagicamente" dopo aver installato i moduli del nodo, puoi usare patch-package.

  1. Correggi il metro-configfile, risolvendo l'errore:

Il file viene visualizzato in formato \node_modules\metro-config\src\defaults\blacklist.js.

Modifica da:

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

Per: 

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
  1. Quindi, genera un file di patch permanente:

npx patch-package metro-config

  1. Nel tuo package.jsontrigger la patch:
"scripts": {
+  "postinstall": "npx patch-package"
}

Tutto fatto! Ora questa patch verrà eseguita in ogni file npm install/ yarn install.

Grazie a https://github.com/ds300/patch-package

— Maycon Mesquita
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.