Não é possível carregar o script. Verifique se você está executando um servidor Metro ou se seu pacote 'index.android.bundle' está compactado corretamente para a liberação

160

react-native run-androidcomando termina deixando uma mensagem no simulador android. A mensagem é a seguinte:

Não é possível carregar o script. Verifique se você está executando um servidor Metro ou se seu pacote 'index.android.bundle' está compactado corretamente para a liberação.

Captura de tela

O que estou fazendo de errado?

Belle Solutions
fonte
você pode experimentar este link stackoverflow.com/questions/32572399/… ?
31419 errorau
5
Eu tenho o mesmo problema porque meu dispositivo não está conectado à Internet.
Huo Chhunleng
Este erro está chegando: throw er; // Evento 'error' não
tratado
eu encontrei-lo e colocá-lo para baixo stackoverflow.com/a/58570426/6852210
Alireza
@ Belle Solution, você encontrou alguma solução?
Hitesh 24/01

Respostas:

94

Você ainda não iniciou o empacotador. Execute npm startou react-native startno diretório raiz do seu projeto antes react-native run-android.

Nerdragen
fonte
primeiro eu corro reagir nativo começo, mas quando executando reagir nativo run-android, que fica encerrado depois que criar com sucesso
Belle Solutions
12
Você precisa ter um console de 2 nós em execução simultaneamente. Um inicia e executa o empacotador, o outro executa o emulador.
31419 Nerdragen
27
Para mim, esse erro aparece mesmo se o bundler for iniciado.
P.Lorand
2
Verifique se a porta 8081 não está bloqueada. Além disso, certifique-se de usar um terminal para iniciar o bundler, aguarde o término do carregamento do gráfico de dependência e execute o react-native run-android em outro terminal.
Nerdragen
1
No Windows, ele roda por si só, mas no Linux, não, thx! Trabalho perfeito!
Adrian Serna
62

Essas etapas realmente me ajudam:

Etapa 1: crie um diretório em android / app / src / main / assets

Comando do Linux :mkdir android/app/src/main/assets

Etapa 2: renomeie index.android.js(no diretório raiz) para index.js( talvez exista um index.jsarquivo nesse caso, você não precise renomeá-lo ) e execute o seguinte comando:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Etapa 3: crie seu APK:react-native run-android

Por favor, use o index.js na versão mais recente.

Aproveitar :)

Saeed
fonte
Qual é a localização deste arquivo em reagir index.android.j projeto nativa
Arbaz.in
@ Arbaz.in no diretório raiz.
Saeed
@ Arbaz.in Talvez haja um index.jsarquivo no diretório raiz caso em que você não precisa para renomeá-lo
Saeed
@Saeed yes found it
Arbaz.in
3
Isso só pode executar o aplicativo no momento, mas como isso permitirá a depuração e o carregamento a quente? essa não é a solução perfeita para fazer isso.
buddhiv
39

Para mim, este erro foi causado por uma atualização do react-native

A partir do Android 9.0 (API nível 28), o suporte a texto não criptografado é desativado por padrão.

Se você verificar o diff de atualização, precisará criar um manifesto de depuração android/app/src/debug/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

Veja para mais informações: https://stackoverflow.com/a/50834600/1713216

https://react-native-community.github.io/upgrade-helper/

Tom
fonte
1
Trabalhou para mim no RN 0.61.3.
Żabojad
2
Infelizmente, isso não funcionou para mim. Eu já tive isso e ainda estou recebendo o mesmo erro, mesmo que o Metro Bundler esteja em execução.
31419 Andrew
Descobri que às vezes preciso de substituições extras se tiver um networkSecurityConfig definido, mas parece que sempre são essas configurações que estão causando os problemas para mim. Você pode tentar remover qualquer configuração de segurança e especificar android:usesCleartextTraffic="true", principalmente, AndroidManifest.xmlse isso funciona?
Tom
Isso funcionou para mim no RN 0.62
KevinAdu 01/07
Eu tenho todas essas configurações, incluindo android: usesCleartextTraffic = "true", mas ainda não consigo executar o aplicativo no dispositivo real.
Lucky_girl 16/07
25

Primeiro, execute as etapas 4 e 5 e, em seguida, você pode executar seu projeto. Se você não obtiver o resultado (com as etapas 4 e 5), execute as seguintes etapas

1- Tente fazer o downgrade da versão do nó (a versão atual é 12.13.1)

  choco uninstall nodejs
  choco install nodejs --version 12.8

2- Adicione o caminho do módulo npm ( C:\Users\your user name\AppData\Roaming\npm) às variáveis ​​do sistema em vez das variáveis ​​do usuário

3- Instale o reagente nativo globalmente usando o comando

  npm install -g react-native-cli

4- Vá para a raiz do diretório do seu projeto e execute o seguinte comando:

  react-native start

5- Abra outro terminal na raiz do seu projeto e execute o seguinte comando:

   react-native run-android 

EDIT:

Você está usando Genymotion? Se sim, execute o seguinte passo:

Após a etapa acima, se você receber o seguinte erro?

error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.

Abra seu genymotion e vá para:

genymotion menu -> Settings -> ADB -> Em seguida, selecione use custom android sdk tools(clique em Procurar para encontrar a localização do SDK)

Por fim, execute seu projeto novamente ..

AbolfazlR
fonte
1
O 12.9 também funcionou para mim. Obrigado, eu atualizei para a versão 12.13.x e comecei a obter o problema acima.
Huey Mataruse
Contexto desta resposta: github.com/facebook/react-native/issues/26598
Christian Davén
18

Você pode tentar o seguinte:

Adicione esta linha no seu AndroidManifest.xml

<application
[...]
android:usesCleartextTraffic="true"
/>
[...]
</application>
tinmarfrutos
fonte
18

Um problema semelhante aconteceu comigo.
Aparentemente, o Mcafee bloqueia a porta 8081. Levei horas para descobrir isso.

Tente executar:

react-native run-android --port=1234

Quando o aplicativo aparecer com um erro no emulador, entre nas configurações do desenvolvedor ( Ctrl+ M).

Altere o "Host e porta do servidor de depuração do dispositivo" para "localhost: 1234".

Feche o aplicativo e inicie-o na gaveta do aplicativo.

Naveen Kumar
fonte
1
Graças a uma dica, eu tive que abrir a porta 8081 no meu guarda-fogo e começou a trabalhar
ukie
Grande votação positiva por isso. Se você tem Mcafee, eu tentaria isso, funcionou para mim.
Puerto
Obrigado, salvei o meu projeto
Rafid
Estou aqui há dois dias, nunca pensei que fosse uma porta bloqueada! Muito obrigado!
P. Naoum
Eu tentei acertar o host local: 8081 no navegador, mas sem sorte. Poucas pesquisas e descobriram que a macafee bloqueou esse porto. Seguiu o seu caminho. Começou a funcionar perfeitamente bem.
Tushar Jajodia
17

basta adicionar três respingos em: node_modules \ metro-config \ src \ defaults \ blacklist.js

substitua esta parte:

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

se você tiver tudo configurado corretamente, tente o seguinte:

tcp reverso adb: 8081 tcp: 8081

Por quê? "Quando o empacotador RN está em execução, há um servidor web ativo acessível em seu navegador em 127.0.0.1:8081. É nesse servidor que o pacote JS para seu aplicativo é servido e atualizado à medida que você faz alterações. Sem o proxy reverso, seu telefone não conseguiria se conectar a esse endereço ".

todos os créditos para Swingline0

Tua Tara
fonte
Você poderia adicionar à sua resposta por que isso deve funcionar e o que esse comando faz?
creyD
Passamos o dia inteiro tentando alternar bibliotecas e este era o meu problema
Adam Katz
10

[Resposta rápida]

Depois de tentar resolver esse problema no meu espaço de trabalho, encontrei uma solução.

Esse erro ocorre porque há um problema com o Metro usando algumas combinações da versão NPM e Node.

Você tem 2 alternativas:

  • Alternativa 1: Tente atualizar ou fazer o downgrade do npm e da versão do nó.
  • Alternativa 2: Vá para este arquivo: \node_modules\metro-config\src\defaults\blacklist.jse altere este código:

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

    e mude para isso:

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

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

Javier C.
fonte
8

Isso funcionou para mim depois de tentar várias maneiras.

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

Substitua:

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

espero que isto ajude.

Mangalprada Malaya
fonte
Trabalhou como um encanto, Graças
César Bermúdez
Trabalhou para mim também. Mas, por que eu tive que corrigi-lo? O que deu errado?
Mashrur 31/12/19
Pelo que parece, metro-configusado \ para caminhos em vez de /, que esta resposta sugere modificar. Não faça isso . Modificar pacotes npm significa que toda a sua equipe deve fazer isso em suas máquinas, no CI, no preparo, na produção e sempre que o metro-config lançar uma atualização. Uma abordagem melhor é instalar o metro-config no GitHub, cometer uma correção, enviar e enviar um PR para corrigi-lo para todos.
Cameron Wilby
6

A partir do Android 9.0 (API nível 28), o suporte a texto não criptografado é desativado por padrão.

É isso que você precisa fazer para se livrar desse problema se você executar comandos de execução normais corretamente

  1. instalação npm
  2. início react-native
  3. react-native run-android

E modifique seu arquivo de manifesto do Android como este.

<application
    android:name=".MainApplication"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true" // add this line with TRUE Value.
android:theme="@style/AppTheme">
MD. Shafiul Alam Biplob
fonte
5

Depois de horas procurando uma resposta. A solução foi criar um nó de downgrade para a versão 12.4.

No meu caso, percebo que o erro ocorre apenas na versão React 0.60 nativa com a versão 12.6 do nó.

Victor Araújo
fonte
4

Minha solução para isso é a seguinte:

Iniciar servidor Metro

$ react-native start

Iniciar Android

$ react-native run-android

Se houver erros dizendo "porta 8081 já em uso", você poderá interromper esse processo e executar novamente

$ react-native start

Consulte Reagir página de solução de problemas nativa .

shizhen
fonte
4

Se você estiver no Linux, abra o terminal no diretório raiz do aplicativo e execute

npm start

abra outra janela do terminal e execute:

react-native run-android
solomon njobvu
fonte
3

Eu só quero adicionar uma possibilidade não óbvia não abordada aqui. Estou usando @ react-native-community / netinfo para detectar alterações na rede, principalmente no estado da rede. Para testar o estado de desligamento da rede, o switch WIFI (no emulador) precisa estar desligado. Isso também efetivamente elimina a ponte entre o emulador e o ambiente de depuração. Eu não havia reativado o WIFI após meus testes, pois estava longe do computador e esqueci-o imediatamente quando voltei.

Existe a possibilidade de que esse também seja o caso de outra pessoa e que valha a pena conferir antes de tomar outras medidas drásticas.

Arunmenon
fonte
3

Eu estava tendo o mesmo problema, o problema para mim era que o adb não estava no caminho correto do ambiente, o erro está informando a porta do metrô, enquanto você está no adb, as portas são eliminadas e reiniciadas.

Adicionar variável de ambiente (ADB)

  1. Variáveis ​​de ambiente abertas
  2. Selecione na variável PATH do segundo quadro e clique na opção de edição abaixo
  3. Clique na opção de adição
  4. Envie o caminho C das ferramentas da plataforma sdk: \ Users \ Meu usuário \ AppData \ Local \ Android \ Sdk \ platform-tools

Nota : Ou dependendo de onde está localizado adb.exe em sua máquina

  1. Salvar alterações

Execute o Android build novamente

$ react-native run-android

Ou

$ react-native start

$ react-native run-android
CarlosChavarria
fonte
3

Eu também enfrentei esse problema. Eu resolvi esta etapa a seguir.

Verifique o caminho do android sdk no Environment Veritable.

Adicionar ANDROID_HOME = C:\Users\user_name\AppData\Local\Android\Sdkna variável do sistema
e C:\Users\user_name\AppData\Local\Android\Sdk\platform-toolscaminho na variável do sistema

substitua sharedBlacklist como o segmento de código abaixo,

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

em node_modules / metro-config / src / default / blacklist.js

Em seguida, execute npx react-native run-android --port 9001

Feliz codificação ..!

Chanaka
fonte
2

Eu experimentei isso apenas porque meu Wifi foi desligado por engano no meu emulator.i liguei novamente e comecei a funcionar bem. Espero que seja útil para alguém

Babá da floresta
fonte
2

A solução que funcionou para mim é a seguinte:

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

Meu exemplo de código

Jorge Santos Neill
fonte
2

atualizar esta parte na lista negra do metro

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

Encontrei o mesmo problema ao seguir o tutorial React Native (desenvolvendo no Linux e direcionando o Android).

Esse problema me ajudou a resolver o problema nas etapas a seguir. Execute os seguintes comandos na sequência abaixo:

  1. (no diretório do projeto) mkdir android/app/src/main/assets
  2. react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
  3. react-native run-android

Você pode automatizar as etapas acima colocando-as em scriptsparte da package.jsonseguinte maneira:

"android-linux": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"

Então você pode executar a npm run android-linuxpartir da sua linha de comando todas as vezes.

cracknut
fonte
1

Por padrão, um pequeno servidor JavaScript chamado "Metro Server" é executado na porta 8081.

Você precisa disponibilizar esta porta para que este servidor inicie. Assim,

  1. solte a porta
  2. feche seu dispositivo virtual
  3. "react-native run-android" novamente.

Como liberar a porta?

http://tenbull.blogspot.com/2019/05/how-to-kill-process-currently-using.html

Como matar o processo atualmente usando uma porta no localhost no Windows?

e, o mais importante, atualizei a versão do meu nó de 8.x para 10.x (mais recente), conforme sugerido pelo facebook @ https://facebook.github.io/react-native/docs/getting-started

Karthik H
fonte
1

Para mim, esse problema começou com a atualização do react-native. A atualização foi necessária para adicionar suporte de 64 bits.

Before:
-------- 
Environment:
Node: 10.15.0
npm: 6.9.0
Watchman: 4.9.0
Xcode: Not Found
Android Studio: 3.4 AI-183.6156.11.34.5692245

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: ~0.55.2 => 0.55.4
react-native-cli: 2.0.1

After:
------
info 
React Native Environment Info:
Binaries:
Node: 10.15.0
npm: 6.9.0
Watchman: 4.9.0
SDKs:
Android SDK:
API Levels: 23, 26, 27, 28
Build Tools: 27.0.3, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
react: ^16.8.6 => 16.9.0 
react-native: 0.59.9 => 0.59.9 
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1

Além disso, uma mudança importante que eu fiz para a atualização foi em ../android/build/build.gradle

android {
    ...
    defaultConfig {
        ...
        targetSdkVersion 28
        ...
    }
    ...
}

Eu tive que alterar o targetSdkVersion de 27 para 28 após o aviso quando tentei fazer upload da compilação (.apk) para o goole play console. Mal sabia eu que essa era a causa raiz do erro acima para mim. As respostas imediatas de @tom e @tinmarfrutos faziam sentido absoluto.

Resolvi o problema adicionando android: usesCleartextTraffic = "true" ao meu android / app / src / debug / AndroidManifest.xml

vivekkan
fonte
1

No meu caso, eu configurei um proxy no meu emulador. Ele volta ao normal depois de remover esse proxy.

Benson
fonte
1

A possibilidade desse erro também é o caminho errado, verifique uma vez

 export ANDROID_HOME=/Users/microrentindia/Library/Android/sdk/
 export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
user3143487
fonte
Nunca pensei nisso. Mas essa foi a resposta para mim.
Siraj Alam
1

IMPORTANTE - Você pode ter muitos dispositivos virtuais em seu ambiente. Verifique se você está alterando o AVD e repita a configuração novamente.

Informações sobre depuração -

Caso você esteja enfrentando o erro acima, você deve primeiro verificar o que está sendo executado na porta 8081

A maneira mais rápida de descobrir que está usando o seguinte comando no terminal

netstat -aon | findstr 8081

se isso lhe mostrar algo, significa que a porta está bloqueada. se possível, desbloqueie essa porta.

Caso contrário, você precisaria alterar a porta. O processo para fazer isso já foi mencionado no comentário acima por Naveen Kumar

react-native run-android --port=9001

Verifique se o 9001 também não é usado :)

TARJU
fonte
1

Tente estas etapas se você já tentou de tudo mencionado nas soluções acima:

  1. Criar arquivo em android / app / src / main / assets
  2. Execute o seguinte comando:

pacote react-native --platform android --dev false --entry-file index.js - android-app de saída de pacotes / app / src / main / assets / index.android.bundle --assets-dest android / app / src / main / res

  1. Agora execute seu comando para criar, por exemplo, react-native run-android
Prayag
fonte
Uau, isso me ajudou em parte. Eu estava preparando meu aplicativo para o Google Play Market, tudo o que fiz foi adicionar novos ícones de ativos para o Android e alterar a meta de versão para 28. Eu tive que voltar para a versão v27 e começar a trabalhar novamente ... Não sei por que reagir não trabalhar com sdk v28.
Michail Pidgorodetskiy
0

Tente o seguinte.

  1. Remova as pastas Android e IOS
  2. executar ejeção nativa de reação
  3. execute react-native run-android

Talvez após as etapas anteriores você tenha as execuções npm start - --reset-cache

Eu trabalho, espero que ajude você.

LuisO
fonte
0

Se você estiver executando no Linux OS, pode haver um caso em que o servidor remoto npm não esteja em execução. Abra outro terminal (com o diretório do projeto) e execute este comando sudo npm start ou sudo react -native start antes de executar sudo react -native run-android

vicky keshri
fonte
0

A mensagem de erro no emulador é meio enganosa. No meu caso, eu usei um Macbook. Eu precisava alterar as permissões no android / gradlew executando $ chmod 755 ./gradlewe, em seguida, o aplicativo poderia ser criado e implantado no emulador do android.

Jane
fonte