Comment résoudre l'erreur sur 'React-Native Start'

117

  1. Je viens d'installer node.js & cli

    • installé node.js

    • installé react-native-cli

      npm -g react-native-cli

  2. Et créé un «nouveau projet».

    react-native init new_project

  3. et dans ce répertoire 'new_project', je suis fatigué de voir si le bundler de métro fonctionne bien.

    react-native start

  4. Mais la commande m'a donné l'erreur suivante et le métro ne démarre pas. Un indice pour corriger cette erreur? (J'utilise Windows 10 OS.)

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

      error Expression régulière non valide: /(.\fixtures.|node_modules[[ ...) .react[[/node_modules.|heapCapture\bundle.js|.\tests.)$/: Classe de caractères non terminée. Exécutez CLI avec l'indicateur --verbose pour plus de détails. SyntaxError: Expression régulière non valide: /(.\fixtures.|node_modules[[ Often ]react[ewisedist[ </font>.|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Classe de caractères non terminée au nouveau RegExp ( ) à la liste noire (D: \ projects \ new_proj \ node_modules \ metro-config \ src \ defaults \ blacklist.js: 34: 10) à getBlacklistRE (D: \ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native -community \ cli \ build \ tools \ loadMetroConfig.js: 69: 59) sur getDefaultConfig (D: \ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native-community \ cli \ build \ tools \ loadMetroConfig.js : 85: 20) en charge (D:

reactjs  react-native  react-native-android  react-native-cli  metro-bundler 
— Chanson Kevin
source
Comme ils l'ont déclaré Run CLI with --verbose flag for more details.Peut-être avez-vous oublié d'échapper à une contre-oblique. Voir stackoverflow.com/questions/14639339/… . Je ne peux pas dire sans plus de détails.
— rhand
Juste au cas où metro-config n'existe pas dans node_modules pour vous, vérifiez ma réponse ci-dessous.
— gprathour

Réponses:

250

Je viens de recevoir une erreur similaire pour la première fois aujourd'hui. Il apparaît dans \node_modules\metro-config\src\defaults\blacklist.js, il y a une expression régulière non valide qui devait être modifiée. J'ai changé la première expression sous sharedBlacklistde:

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

à:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
— Clem
source
1
Merci beaucoup! J'ai fait des changements comme vous l'avez dit et cela fonctionne maintenant. Dois-je modifier cela sur chaque projet ou existe-t-il un moyen de l'appliquer globalement?
— Song Kevin
11
Vous avez une autre réponse de la requête sur Github. - 'Cela est causé par le nœud v12.11.0, la rétrogradation à la v12.10.0 le résoudra.' C'était de Leo.Lei. Et j'ai aussi besoin de voir si cela fonctionne ou non.
— Chanson Kevin du
3
Excellente solution! Merci beaucoup. React Native ressemble à un tel buggy, du cache npm corrompu aux erreurs PERM. Il m'a fallu deux jours pour l'installer.
— EdNdee
4
/node_modules[
— \
1
Merci beaucoup! Cela me fait gagner beaucoup de temps. Je viens de mettre à niveau mon Node.js de la v8.xx à la v12.13.0 cette nuit, puis cette erreur qui entraîne soudainement un échec de démarrage de l'application ... je ne savais pas que c'était causé par ce bogue sans ce message ...
— garykwwong
107

Ceci est causé par le nœud v12.11.0 en raison de la façon dont il gère l'emplacement normal de deux façons de résoudre ce problème

Méthode I

Vous pouvez rétrograder vers le nœud v12.10.0, cela appliquera la bonne façon de traiter l'erreur d'analyse

Méthode II

Vous pouvez terminer correctement l'expression régulière dans votre cas en modifiant le fichier situé dans:

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

De:

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

À:

 var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
— Charles
source
2
c'est super utile, ne pouvez-vous pas soumettre une pull request? à metro-configou expo-cli?
— its4zahoor
1
Une pull request a été envoyée en octobre: github.com/facebook/metro/commit/…
— schellack
20

[Réponse rapide]

Il y a un problème avec Metro en utilisant certaines versions de NPM et Node.

Vous pouvez résoudre le problème en modifiant du code dans le fichier \node_modules\metro-config\src\defaults\blacklist.js.

Recherchez cette variable:

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

et changez en ceci:

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

Veuillez noter que si vous exécutez une installation npm ou une installation yarn, vous devez à nouveau modifier le code.

— Javier C.
source
Ce problème ne peut-il pas être résolu par les développeurs? Chaque fois que je viens ici. Merci monsieur
— Hasan Basri
1
Oui, le problème peut être résolu par les développeurs de métro effectuant ces modifications.
— Javier C.
2
Je vous remercie! Cela l'a corrigé!
— Robert
Je ne pense pas que ce soit une bonne solution. modification des fichiers dans node_modules
— CodeMind
1
Notez que si vous utilisez une ancienne version de react-native (par exemple 0.51.0), le fichier à modifier est à la place:.\node_modules\metro-bundler\src\blacklist.js
— Venryx
20

Vous avez deux solutions:

soit vous rétrogradez le nœud vers la version 12.10.0, soit vous pouvez modifier ce fichier pour chaque projet que vous allez créer.

node_modules / metro-config / src / defaults / blacklist.js Changez ceci:

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

pour ça:

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

J'ai eu le même problème que j'ai modifié le E: \ NodeJS \ ReactNativeApp \ ExpoTest \ node_modules \ metro-config \ src \ defaults \ blacklist.js dans mon projet

de 

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

à

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

cela a parfaitement fonctionné pour moi

— nelajala nelajala
source
5

Un PR avec un correctif a été fusionné dans le référentiel du métro . Il ne reste plus qu'à attendre la prochaine version. Pour l'instant, la meilleure option est de revenir à NodeJS v12.10.0. Comme Brandon l'a souligné, modifier quoi que ce soit dans le cadre d'une node_modules/pratique est une très mauvaise pratique et ne sera pas une solution définitive.

— JoseLion
source
5

Je n'ai pas metro-config dans mon projet, et maintenant?

J'ai trouvé que dans un projet assez ancien, il n'y a pas de metro-configfichier node_modules. Si c'est le cas avec vous, alors,

Accédez à node_modules / metro-bundler / src / blacklist.js

Et faites la même étape que celle mentionnée dans les autres réponses, c'est-à-dire

Remplacer

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

avec

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

PS J'ai fait face à la même situation dans quelques projets, alors j'ai pensé que le partager pourrait aider quelqu'un.

Éditer

Selon le commentaire de @beltrone, le fichier peut également exister dans,

node_modules \ metro \ src \ blacklist.js

— gprathour
source
1
A aidé, mais le fichier dans mon 360 init est MyProject\node_modules\metro\src\blacklist.js. À votre santé.
— beltrone
4

J'ai le même problème.

"error Expression régulière non valide: / (. \ fixtures \. | node_modules [\] react [\] dist [\]. | website \ node_modules \. | heapCapture \ bundle.js |. \ tests \. ) $ /: Unterminated classe de caractères. "

Changer l'expression régulière dans \node_modules\metro-config\src\defaults\blacklist.js

De

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

À

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

Ce changement a résolu mon erreur.

— Mishan Madhupa
source
2

Aller à

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

et remplacez-le

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

à

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

Ce n'est pas une meilleure pratique et ma recommandation est la suivante: rétrograder la version du nœud en 12.9 OU mettre à jour metro-config car ils corrigent le problème du nœud.

— Lahiru Amarathunge
source
1

Tu peux aller à...

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

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

pour ça:

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

En règle générale, je ne modifie pas les fichiers à l'intérieur node_modules/(ou tout ce qui n'est pas commis dans le cadre d'un référentiel) car le prochain nettoyage, construction ou mise à jour les régressera. Je l'ai certainement fait dans le passé et cela m'a mordu à plusieurs reprises. Mais cela fonctionne comme un correctif de développement local / à court terme jusqu'à ce que / à moins qu'il metro-configsoit mis à jour.

Merci!

— Brandon Gohsman
source
0

J'ai trouvé que le regexp.source avait changé node v12.11.0, peut-être que le nouveau v8moteur en était la cause. en savoir plus sur 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
source
0

Corrigez-le en installant metro-config de la dernière version (0.57.0 pour l'instant), ils avaient résolu le problème:

npm installer metro-config

vous pouvez le supprimer plus tard, après les versions du module de mise à jour des gars natifs de réaction

— KEMBL
source
Cela ne m'aide pas.
— Velizar Andreev Kitanov
0

L'utilisation de fil empêche cette situation. Le fil doit utiliser

— Gucal
source
0

Sur Windows 10, je recommande vivement d'installer Linux Bash Shell.

Voici un bon guide pour le configurer: https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/

suivez simplement les étapes, choisissez votre distribution linux et évitez autant que possible de travailler avec node sur cmd depuis une instabilité évidente.

Prenez en considération Microsoft met fortement en garde contre l'ajout ou la modification de fichiers Linux avec le logiciel Windows, comme décrit ici: howtogeek.com/261383/how-to-access-your-ubuntu-bash-files-in-windows-and-your-windows- système-drive-in-bash /

J'espère que ça aide!

— Avatazjoe
source
0

Je viens de mettre à jour package.json pour changer de

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

à

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

Il semble que le problème ne se produira pas dans sdk-36 !!

Ma version de nœud est v12.16.0 et os est win10 .

— Anson
source
0

La solution est simple, mais temporaire ...

Notez que si vous exécutez un npm installou un, yarn installvous devez à nouveau modifier le code!

Alors, comment pouvons-nous exécuter cela automatiquement?

Solution permanente

Pour faire cela "automatiquement" après avoir installé vos modules de nœuds, vous pouvez utiliser patch-package.

  1. Corrigez le metro-configfichier en résolvant l'erreur:

Le fichier apparaît au format \node_modules\metro-config\src\defaults\blacklist.js.

Modifier à partir de:

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

À: 

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
  1. Ensuite, générez un fichier de correctif permanent:

npx patch-package metro-config

  1. Dans votre package.jsondéclencheur, le patch:
"scripts": {
+  "postinstall": "npx patch-package"
}

Terminé! Maintenant, ce patch sera fait à chaque npm install/ yarn install.

Merci à https://github.com/ds300/patch-package

— Maycon Mesquita
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.