Como resolver o erro no 'início reativo nativo'

117

  1. Acabei de instalar node.js e cli

    • node.js instalado

    • instalado reac-nativo-cli

      npm -g react-native-cli

  2. E criou um 'novo projeto'.

    react-native init new_project

  3. e dentro desse diretório 'new_project', cansei de ver se o metro bundler funciona bem.

    react-native start

  4. Mas o comando me deu o seguinte erro e o metro não está iniciando. Alguma pista para corrigir esse erro? (Estou usando o sistema operacional Windows 10).

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

      erro Expressão regular inválida: /(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Classe de caractere não terminada. Execute a CLI com o sinalizador --verbose para obter mais detalhes. SyntaxError: Expressão regular inválida: /(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Classe de caractere sem terminação no novo RegExp ( ) na lista negra (D: \ projects \ new_proj \ node_modules \ metro-config \ src \ defaults \ blacklist.js: 34: 10) em getBlacklistRE (D: \ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native -community \ cli \ build \ tools \ loadMetroConfig.js: 69: 59) em getDefaultConfig (D: \ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native-community \ cli \ build \ tools \ loadMetroConfig.js : 85: 20) na carga (D:

reactjs  react-native  react-native-android  react-native-cli  metro-bundler 
— Canção Kevin
fonte
Como eles afirmaram, Run CLI with --verbose flag for more details.talvez você tenha esquecido de escapar de uma barra invertida. Consulte stackoverflow.com/questions/14639339/… . Não posso dizer sem mais detalhes.
— rhand
Apenas no caso de metro-config não existir em node_modules para você, verifique minha resposta abaixo.
— gprathour

Respostas:

250

Acabei de receber um erro semelhante pela primeira vez hoje. Aparece em \node_modules\metro-config\src\defaults\blacklist.js, há uma expressão regular inválida que precisava ser alterada. Mudei a primeira expressão em sharedBlacklistde:

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

para:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
— Clem
fonte
1
Muito obrigado! Fiz alterações como você disse e agora funciona. Tenho que modificar isso em todos os projetos ou há uma maneira de aplicar isso globalmente?
— Canção Kevin
11
Recebi outra resposta da consulta no Github. - 'É causado pelo nó v12.11.0, o downgrade para v12.10.0 irá resolvê-lo.' Era de Leo.Lei. E também preciso ver se funciona ou não.
— Canção Kevin
3
Excelente solução! Muito obrigado. O React Native parece um passeio cheio de erros, desde o cache npm corrompido até os erros PERM. Levei dois dias apenas para instalar.
— EdNdee 01 de
4
/node_modules[\/\]react[\/\]dist[\/\].*/, Apenas esta linha precisa ser alterada
— vivek
1
Muito obrigado! Isso me economiza muito tempo. Acabei de atualizar meu Node.js de v8.xx para v12.13.0 nesta noite e, de repente, este erro leva à falha de inicialização do aplicativo ... não sabia que é causado por esse bug sem este post ...
— garykwwong
107

Isso é causado pelo nó v12.11.0 devido à forma como ele trata a localização regular, há duas maneiras de resolver este problema

Método I

Você pode fazer o downgrade para o nó v12.10.0 que aplicará a maneira correta de lidar com o erro de análise

Método II

Você pode encerrar corretamente a expressão regular em seu caso, alterando o arquivo localizado a:

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

De:

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

Para:

 var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
— Charles
fonte
2
isso é muito útil, vocês não podem enviar uma solicitação de pull? para metro-configou expo-cli?
— its4zahoor
1
Uma solicitação de pull foi enviada em outubro: github.com/facebook/metro/commit/…
— schellack
20

[Resposta rápida]

Há um problema com o Metro ao usar algumas versões de NPM e Node.

Você pode corrigir o problema alterando algum código no arquivo \node_modules\metro-config\src\defaults\blacklist.js.

Pesquise esta variável:

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

e mude para isto:

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

Observe que se você executar uma instalação npm ou yarn, será necessário alterar o código novamente.

— Javier C.
fonte
Este problema não pode ser corrigido pelos desenvolvedores? Toda vez que venho aqui. Obrigado senhor
— Hasan Basri
1
Sim, o problema pode ser corrigido por desenvolvedores de metro fazendo essas mudanças.
— Javier C.
2
Obrigado! Isso consertou!
— Robert
Não acho que seja uma boa solução. modificando arquivos dentro de node_modules
— CodeMind
1
Observe que se você estiver usando uma versão antiga do react-native (por exemplo, 0.51.0), o arquivo a ser alterado está em:.\node_modules\metro-bundler\src\blacklist.js
— Venryx
20

Você tem duas soluções:

Você faz o downgrade do nó para V12.10.0 ou pode modificar este arquivo para cada projeto que criar.

node_modules / metro-config / src / defaults / blacklist.js Altere isso:

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

para isso:

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

Tive o mesmo problema, alterei E: \ NodeJS \ ReactNativeApp \ ExpoTest \ node_modules \ metro-config \ src \ defaults \ blacklist.js no meu projeto

de 

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

para

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

Isso funcionou perfeitamente para mim

— nelajala nelajala
fonte
5

Um PR com uma correção foi mesclado no repositório metro . Agora só precisamos esperar até o próximo lançamento. Por enquanto, a melhor opção é fazer o downgrade para o NodeJS v12.10.0. Como Brandon apontou, modificar qualquer coisa node_modules/é uma prática muito ruim e não será a solução final.

— JoseLion
fonte
5

Não tenho metro-config no meu projeto, e agora?

Eu descobri que no projeto muito mais velho não existe metro-configno node_modules. Se for o seu caso, então,

Acesse node_modules / metro-bundler / src / blacklist.js

E faça a mesma etapa mencionada em outras respostas, ou seja,

Substituir

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

com

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

PS Eu enfrentei a mesma situação em alguns projetos, então pensei que compartilhar isso poderia ajudar alguém.

Editar

De acordo com o comentário de @beltrone, o arquivo também pode existir em,

node_modules \ metro \ src \ blacklist.js

— gprathour
fonte
1
Ajudou, mas o arquivo no meu init 360 está dentro MyProject\node_modules\metro\src\blacklist.js. Felicidades.
— beltrone
4

Eu tenho o mesmo problema.

"erro Expressão regular inválida: / (. \ fixtures \. | node_modules [\] react [\] dist [\]. | website \ node_modules \. | heapCapture \ bundle.js |. \ tests \. ) $ /: Não terminado classe de personagem. "

Altere a expressão regular em \node_modules\metro-config\src\defaults\blacklist.js

De

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

Para

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

Essa mudança resolveu meu erro.

— Mishan Madhupa
fonte
2

Vamos para

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

e substitua isso

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

para

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

Esta não é uma prática recomendada e minha recomendação é: fazer downgrade da versão do nó para 12.9 OU atualizar o metro-config, pois eles estão corrigindo o problema do Node.

— Lahiru Amarathunge
fonte
1

Você pode ir para...

\ node_modules \ metro-config \ src \ defaults \ blacklist.js e mudança ...

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

por esta:

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

Como regra geral, eu não modifico os arquivos dentro node_modules/(ou qualquer coisa que não seja confirmada como parte de um repositório), pois a próxima limpeza, construção ou atualização irá regredi-los. Eu definitivamente já fiz isso no passado e isso me mordeu algumas vezes. Mas isso funciona como uma correção de desenvolvimento local / de curto prazo até / a menos que metro-configseja atualizado.

Obrigado!

— Brandon Gohsman
fonte
0

Descobri que regexp.source mudou de node v12.11.0, talvez o novo v8mecanismo tenha causado. veja mais em 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

Corrija isso instalando o metro-config da versão mais recente (0.57.0 por enquanto). Eles corrigiram o problema:

npm install metro-config

você pode removê-lo mais tarde, após atualizar as versões do módulo de atualização

— KEMBL
fonte
Isso não me ajuda.
— Velizar Andreev Kitanov
0

O uso de fio evita essa situação. Fios devem usar

— Gucal
fonte
0

No Windows 10, eu recomendo fortemente instalar o Linux Bash Shell.

Aqui está um bom guia para configurá-lo: https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/

basta seguir os passos, escolher sua distribuição linux e evitar o máximo possível trabalhar com node no cmd devido à óbvia instabilidade.

Leve em consideração que a Microsoft alerta fortemente contra adicionar ou modificar arquivos Linux com software Windows, conforme descrito aqui: howtogeek.com/261383/how-to-access-your-ubuntu-bash-files-in-windows-and-your-windows- system-drive-in-bash /

Espero que ajude!

— Avatazjoe
fonte
0

Acabei de atualizar o package.json para mudar de

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

para

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

Parece que o problema não ocorrerá no sdk-36 !!

Minha versão do nó é v12.16.0 e os é win10 .

— anson
fonte
0

A solução é simples, mas temporária ...

Observe que se você executar um npm installou um, yarn installprecisará alterar o código novamente!

Então, como podemos executar isso automaticamente?

Solução permanente

Para fazer isso "automagicamente" após instalar seus módulos de nó, você pode usar patch-package.

  1. Corrija o metro-configarquivo, resolvendo o erro:

O arquivo aparece em \node_modules\metro-config\src\defaults\blacklist.js.

Editar de:

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

Para: 

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
  1. Em seguida, gere um arquivo de patch permanente:

npx patch-package metro-config

  1. Em seu package.jsongatilho, o patch:
"scripts": {
+  "postinstall": "npx patch-package"
}

Tudo feito! Agora este patch será feito em cada npm install/ yarn install.

Graças a https://github.com/ds300/patch-package

— Maycon Mesquita
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.