Cómo resolver el error en 'react-native start'

117

  1. Acabo de instalar node.js y cli

    • instalado node.js

    • instalado react-native-cli

      npm -g react-native-cli

  2. Y creó un 'nuevo proyecto'.

    react-native init new_project

  3. y dentro de ese directorio 'new_project', me cansé de ver si el paquete de metro funciona bien.

    react-native start

  4. Pero el comando me dio un error de seguimiento y el metro no se inicia. ¿Alguna pista para corregir este error? (Estoy usando el sistema operativo Windows 10).

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

      error Expresión regular no válida: /(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Clase de carácter no terminado. Ejecute CLI con el indicador --verbose para obtener más detalles. SyntaxError: Expresión regular no válida: /(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Clase de carácter no terminado en la nueva RegExp ( ) en la lista negra (D: \ proyectos \ new_proj \ node_modules \ metro-config \ src \ defaults \ blacklist.js: 34: 10) en getBlacklistRE (D: \ proyectos \ new_proj \ node_modules \ react-native \ node_modules @ react-native -community \ cli \ build \ tools \ loadMetroConfig.js: 69: 59) en getDefaultConfig (D: \ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native-community \ cli \ build \ tools \ loadMetroConfig.js : 85: 20) en carga (D:

reactjs  react-native  react-native-android  react-native-cli  metro-bundler 
— Canción Kevin
fuente
Como dijeron. Run CLI with --verbose flag for more details.Quizás se olvidó de escapar de una barra invertida. Consulte stackoverflow.com/questions/14639339/… . No puedo decir sin más detalles.
— rhand
En caso de que metro-config no exista en node_modules para usted, verifique mi respuesta a continuación.
— gprathour

Respuestas:

249

Recibí un error similar por primera vez hoy. Aparece en \node_modules\metro-config\src\defaults\blacklist.js, hay una expresión regular no válida que necesitaba cambiarse. Cambié la primera expresión debajo sharedBlacklistde:

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

a:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
— Ayunarse
fuente
1
¡Muchas gracias! Hice cambios como dijiste y ahora funciona. ¿Tengo que modificar esto en cada proyecto o hay alguna forma de aplicarlo globalmente?
— Song Kevin
11
Obtuve otra respuesta de la consulta en Github. - 'Es causado por el nodo v12.11.0, bajar a v12.10.0 lo resolverá'. Era de Leo.Lei. Y también necesito ver si funciona o no.
— Song Kevin
3
¡Excelente solución! Muchas gracias. React Native parece un viaje lleno de errores, desde el caché npm corrupto hasta los errores PERM. Me ha llevado dos días instalarlo.
— EdNdee
4
/node_modules[\/\]react[\/\]dist[\/\].*/, solo esta línea necesita cambios
— vivek
1
¡Muchas gracias! Me ahorra mucho tiempo. Acabo de actualizar mi Node.js de v8.xx a v12.13.0 en esta noche y luego este error repentinamente conduce a una falla en el inicio de la aplicación ... no sabía que era la causa de este error sin esta publicación ...
— garykwwong
107

Esto es causado por el nodo v12.11.0 debido a la forma en que trata la ubicación regular, hay dos formas de resolver este problema

Método I

Puede degradar al nodo v12.10.0, esto aplicará la forma correcta de lidiar con el error de análisis

Método II

Puede terminar correctamente la expresión regular en su caso cambiando el archivo ubicado a:

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

De:

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

A:

 var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
— Charles
fuente
2
esto es muy útil, ¿no pueden enviar una solicitud de extracción? a metro-configo expo-cli?
— its4zahoor
1
Se envió una solicitud de extracción en octubre: github.com/facebook/metro/commit/…
— schellack
20

[Respuesta rápida]

Hay un problema con Metro al usar algunas versiones de NPM y Node.

Puede solucionar el problema cambiando algún código en el archivo \node_modules\metro-config\src\defaults\blacklist.js.

Buscar esta variable:

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

y cambia a esto:

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

Tenga en cuenta que si ejecuta una instalación de npm o una instalación de hilo, debe cambiar el código nuevamente.

— Javier C.
fuente
¿Los desarrolladores no pueden solucionar este problema? Cada vez que vengo aquí. Gracias señor
— Hasan Basri
1
Sí, los desarrolladores del metro pueden solucionar el problema al realizar estos cambios.
— Javier C.
2
¡Gracias! ¡Esto lo arregló!
— Robert
No creo que esta sea una buena solución. modificar archivos dentro de node_modules
— CodeMind
1
Tenga en cuenta que si está utilizando una versión anterior de react-native (por ejemplo, 0.51.0), el archivo que se cambiará se encuentra en:.\node_modules\metro-bundler\src\blacklist.js
— Venryx
20

Tienes dos soluciones:

o degrada el nodo a V12.10.0 o puede modificar este archivo para cada proyecto que cree.

node_modules / metro-config / src / defaults / blacklist.js Cambie esto:

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

a esto:

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

Tuve el mismo problema, modifiqué E: \ NodeJS \ ReactNativeApp \ ExpoTest \ node_modules \ metro-config \ src \ defaults \ blacklist.js en mi proyecto

de 

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

a

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

Esto funcionó perfectamente para mí

— nelajala nelajala
fuente
5

Un PR con una solución se ha fusionado en el repositorio de metro . Ahora solo tenemos que esperar hasta el próximo lanzamiento. Por ahora, la mejor opción es cambiar a NodeJS v12.10.0. Como señaló Brandon , modificar cualquier cosa node_modules/es una práctica realmente mala y no será una solución final.

— JoseLion
fuente
5

No tengo metro-config en mi proyecto, ¿y ahora qué?

Descubrí que en proyectos bastante más antiguos no hay metro-configarchivos node_modules. Si es tu caso, entonces,

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

Y haga el mismo paso que se menciona en otras respuestas, es decir

Reemplazar

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__\/.*/
];

PD. Enfrenté la misma situación en un par de proyectos, así que pensé que compartirlo podría ayudar a alguien.

Editar

Según el comentario de @beltrone, el archivo también podría existir en,

módulos_nodo \ metro \ src \ blacklist.js

— gprathour
fuente
1
Ayudó, pero el archivo en mi 360 init está en formato MyProject\node_modules\metro\src\blacklist.js. Salud.
— Beltrone
4

Tengo el mismo problema.

"error Expresión regular no válida: / (. \ fixtures \. | node_modules [\] react [\] dist [\]. | sitio web \ node_modules \. | heapCapture \ bundle.js |. \ tests \. ) $ /: Sin terminar clase de personaje ".

Cambiar la expresión regular en \node_modules\metro-config\src\defaults\blacklist.js

De

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

A

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

Este cambio resolvió mi error.

— Mishan Madhupa
fuente
2

Ir

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

y reemplaza esto

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

a

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

Esta no es una buena práctica y mi recomendación es: degradar la versión del nodo a 12.9 O actualizar metro-config ya que están solucionando el problema del nodo.

— Lahiru Amarathunge
fuente
1

Puedes ir a...

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

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

para esto:

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

Como regla general, no modifico archivos dentro node_modules/(o cualquier cosa que no se comprometa como parte de un repositorio) ya que la próxima limpieza, compilación o actualización los hará retroceder. Definitivamente lo he hecho en el pasado y me ha mordido un par de veces. Pero esto funciona como una solución de desarrollo local / a corto plazo hasta / a menos que metro-configse actualice.

¡Gracias!

— Brandon Gohsman
fuente
0

Encontré que regexp.source cambió de node v12.11.0, tal vez el nuevo v8motor causó. ver más en 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
fuente
0

Solucionarlo instalando metro-config de la última versión (0.57.0 por ahora) habían solucionado el problema:

npm instalar metro-config

puede eliminarlo más tarde, después de que los tipos nativos de reacción actualicen las versiones del módulo

— KEMBL
fuente
Eso no me ayuda.
— Velizar Andreev Kitanov
0

El uso de hilo evita esta situación. El hilo debe usar

— Gucal
fuente
0

En Windows 10, recomiendo encarecidamente instalar Linux Bash Shell.

Aquí hay una buena guía para configurarlo: https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/

simplemente siga los pasos, elija su distribución de Linux y evite tanto como sea posible trabajar con nodo en cmd ya que la inestabilidad es obvia.

Tenga en cuenta que Microsoft advierte enérgicamente contra la adición o modificación de archivos de Linux con software de Windows, como se describe aquí: howtogeek.com/261383/how-to-access-your-ubuntu-bash-files-in-windows-and-your-windows- system-drive-in-bash /

¡Espero eso ayude!

— Avatazjoe
fuente
0

Acabo de actualizar package.json para cambiar de

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

a

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

¡Parece que el problema no ocurrirá en sdk-36 !

Mi versión de nodo es v12.16.0 y el sistema operativo es win10 .

— anson
fuente
0

La solución es simple, pero temporal ...

Tenga en cuenta que si ejecuta un npm installo un yarn install, debe cambiar el código nuevamente.

Entonces, ¿cómo podemos ejecutar esto automáticamente?

Solución permanente

Para hacer esto "automágicamente" después de instalar sus módulos de nodo, puede usar patch-package.

  1. Arregle el metro-configarchivo, solucionando el error:

El archivo aparece en formato \node_modules\metro-config\src\defaults\blacklist.js.

Editar desde:

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

A: 

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
  1. Luego, genere un archivo de parche permanente:

npx patch-package metro-config

  1. En tu package.jsongatillo el parche:
"scripts": {
+  "postinstall": "npx patch-package"
}

¡Todo listo! Ahora, este parche se realizará en cada npm install/ yarn install.

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

— Maycon Mesquita
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.