Tidak dapat memuat skrip. Pastikan Anda menjalankan server Metro atau bundel 'index.android.bundle' Anda dikemas dengan benar untuk dirilis

160

react-native run-androidperintah berakhir dengan meninggalkan pesan di simulator android. Pesannya adalah sebagai berikut:

Tidak dapat memuat skrip. Pastikan Anda menjalankan server Metro atau bundel 'index.android.bundle' Anda dikemas dengan benar untuk dirilis.

Tangkapan layar

Apa yang saya lakukan salah?

Solusi Belle
sumber
dapatkah Anda mencoba tautan ini stackoverflow.com/questions/32572399/… ?
errorau
5
Saya memiliki masalah yang sama karena perangkat saya tidak terhubung ke internet.
Huo Chhunleng
Kesalahan ini terjadi: throw er; // Peristiwa 'kesalahan' yang tidak
ditangani
saya menemukannya dan meletakkannya di stackoverflow.com/a/58570426/6852210
Alireza
@Belle Solution, apakah Anda menemukan solusi?
Hitesh

Jawaban:

94

Anda belum memulai bundler. Jalankan npm startatau react-native startdi direktori root proyek Anda sebelumnya react-native run-android.

Nerdragen
sumber
pertama saya menjalankan reaksi-asli mulai tetapi ketika menjalankan reaksi-asli menjalankan-android, itu akan dihentikan setelah membangun berhasil
Belle Solutions
12
Anda harus menjalankan konsol 2 simpul secara bersamaan. Satu memulai dan menjalankan bundler, yang lainnya menjalankan emulator.
Nerdragen
27
Bagi saya, kesalahan ini muncul bahkan jika bundler dimulai.
P.Lorand
2
Pastikan port 8081 tidak diblokir. Juga, pastikan Anda menggunakan satu terminal untuk memulai bundler, tunggu sampai selesai memuat grafik dependensi, kemudian jalankan react-native run-android di terminal lain.
Nerdragen
1
Di windows berjalan dengan sendirinya, tetapi di linux tidak, thx! Bekerja dengan sempurna!
Adrian Serna
62

Langkah-langkah ini sangat membantu saya:

Langkah 1: Buat direktori di android / app / src / main / aset

Perintah Linux :mkdir android/app/src/main/assets

Langkah 2: Ganti nama index.android.js(dalam direktori root) menjadi index.js( Mungkin ada index.jsfile dalam hal ini Anda tidak perlu mengubah nama itu ) kemudian jalankan perintah berikut:

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

Langkah 3: Bangun APK Anda:react-native run-android

Silakan gunakan index.js dalam versi terbaru.

Nikmati :)

Saeed
sumber
Apa lokasi file ini di reaksi project.android.j proyek asli
Arbaz.in
@ Arbaz.in di direktori root.
Saeed
@ Arbaz.in Mungkin ada index.jsfile di direktori root di mana Anda tidak perlu mengganti nama
Saeed
@Sayeed ya menemukannya
Arbaz.in
3
Ini hanya dapat menjalankan aplikasi untuk saat ini, tetapi bagaimana ini akan memungkinkan debugging dan memuat panas? ini bukan solusi sempurna untuk menyelesaikan ini.
buddhiv
39

Bagi saya kesalahan ini disebabkan oleh peningkatan versi asli

Dimulai dengan Android 9.0 (API level 28), dukungan cleartext dinonaktifkan secara default.

Jika Anda memeriksa perbedaan upgrade, Anda perlu membuat manifes debug 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>

Lihat untuk info lebih lanjut: https://stackoverflow.com/a/50834600/1713216

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

Tom
sumber
1
Bekerja untuk saya di RN 0.61.3.
Żabojad
2
Sayangnya, ini tidak berhasil untuk saya. Saya sudah memiliki ini dan saya masih mendapatkan kesalahan yang sama, meskipun Metro Bundler sedang berjalan.
Andrew
Saya menemukan bahwa kadang-kadang saya perlu penggantian tambahan jika saya memiliki networkSecurityConfig yang ditentukan, sepertinya selalu ada pengaturan ini yang menyebabkan masalah bagi saya. Anda dapat mencoba menghapus konfigurasi keamanan apa pun, dan tentukan android:usesCleartextTraffic="true"pada tampilan utama AndroidManifest.xmlapakah itu berfungsi?
Tom
Ini bekerja untuk saya di RN 0,62
KevinAdu
Saya memiliki semua pengaturan itu termasuk android: usingCleartextTraffic = "true", tapi saya masih tidak bisa menjalankan aplikasi di perangkat nyata.
Lucky_girl
25

Pertama lakukan langkah 4 dan 5 maka Anda dapat menjalankan proyek Anda. Jika Anda tidak mendapatkan hasilnya (dengan langkah 4 dan 5) lakukan langkah-langkah berikut

1- Cobalah untuk menurunkan versi versi Node Anda (versi saat ini 12.13.1)

  choco uninstall nodejs
  choco install nodejs --version 12.8

2- Tambahkan jalur modul npm ( C:\Users\your user name\AppData\Roaming\npm) ke variabel sistem, bukan variabel pengguna

3 - Instal bereaksi asli secara global dengan menggunakan perintah

  npm install -g react-native-cli

4- Pergi ke root direktori proyek Anda dan jalankan perintah berikut:

  react-native start

5- Buka terminal lain di root proyek Anda dan jalankan perintah berikut:

   react-native run-android 

EDIT:

Anda menggunakan Genymotion? Jika ya, lakukan langkah berikut:

Setelah langkah di atas apakah Anda mendapatkan kesalahan berikut?

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

Buka genimotion Anda dan buka:

genymotion menu -> Settings -> ADB -> Kemudian pilih use custom android sdk tools(klik browse untuk menemukan lokasi SDK)

Akhirnya, jalankan proyek Anda lagi ..

AbolfazlR
sumber
1
12.9 juga bekerja untuk saya, Terima kasih, saya telah meningkatkan ke versi 12.13.x dan mulai mendapatkan masalah di atas.
Huey Mataruse
Latar belakang untuk jawaban ini: github.com/facebook/react-native/issues/26598
Christian Davén
18

Anda dapat mencoba yang berikut ini:

Tambahkan baris ini di AndroidManifest.xml Anda

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

Masalah serupa terjadi pada saya.
Rupanya Mcafee memblokir port 8081. Butuh waktu berjam-jam untuk mencari tahu hal ini.

Coba jalankan:

react-native run-android --port=1234

Ketika aplikasi muncul dengan kesalahan pada emulator, masuk ke pengaturan dev ( Ctrl+ M).

Ubah "host server Debug dan port untuk perangkat" menjadi "localhost: 1234".

Tutup aplikasi dan mulai dari laci aplikasi.

Naveen Kumar
sumber
1
terima kasih atas petunjuknya, saya harus membuka port 8081 di firewall saya dan mulai berfungsi
ukie
Suara positif untuk ini. Jika Anda memiliki McAfee, saya akan mencoba ini, itu berhasil untuk saya.
Puerto
Terima kasih, menyelamatkan proyek saya
Rafid
Saya terjebak di sini selama dua hari, tidak akan pernah berpikir itu adalah port yang diblokir! Terima kasih banyak!
P. Naoum
Saya mencoba untuk menekan localhost: 8081 di browser tetapi tidak berhasil. Sedikit riset dan menemukan bahwa macafee telah memblokir port itu. Mengikuti jalanmu. Mulai bekerja dengan sangat baik.
Tushar Jajodia
17

cukup tambahkan tiga splash di: node_modules \ metro-config \ src \ defaults \ blacklist.js

ganti bagian ini:

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

jika semuanya sudah terkonfigurasi dengan benar, maka coba ini:

adb reverse tcp: 8081 tcp: 8081

Mengapa? "Ketika paket RN sedang berjalan, ada server web aktif yang dapat diakses di browser Anda di 127.0.0.1:8081. Ini dari server ini bahwa bundel JS untuk aplikasi Anda disajikan dan disegarkan saat Anda membuat perubahan. Tanpa proxy terbalik, telepon Anda tidak akan dapat terhubung ke alamat itu. "

semua kredit ke Swingline0

Tua Tara
sumber
Bisakah Anda menambahkan jawaban Anda mengapa ini harus bekerja dan apa perintah ini?
creyD
menghabiskan sepanjang hari mencoba untuk beralih ke perpustakaan dan ini adalah masalah saya
Adam Katz
10

[Jawaban cepat]

Setelah mencoba menyelesaikan masalah ini di ruang kerja saya, saya menemukan solusi.

Kesalahan ini karena ada masalah dengan Metro menggunakan beberapa kombinasi NPM dan versi Node.

Anda memiliki 2 alternatif:

  • Alternatif 1: Cobalah untuk memperbarui atau menurunkan versi npm dan node.
  • Alternatif 2: Buka file ini: \node_modules\metro-config\src\defaults\blacklist.jsdan ubah kode ini:

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

    dan ubah menjadi ini:

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

    Harap dicatat bahwa jika Anda menjalankan npm installatau yarn installAnda perlu mengubah kode lagi.

Javier C.
sumber
8

Ini berhasil bagi saya setelah mencoba beberapa cara.

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

Ganti:

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

dengan:

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

semoga ini membantu.

Mangalprada Malaya
sumber
Bekerja seperti pesona, Terima kasih
César Bermúdez
Bekerja untuk saya juga. Tapi, mengapa saya harus memperbaikinya? Apa yang salah?
Mashrur
Dari tampilannya, metro-configdigunakan \ untuk jalur alih-alih /, yang disarankan untuk diubah oleh jawaban ini. Jangan lakukan ini . Memodifikasi paket npm berarti seluruh tim Anda harus melakukan ini pada mesin mereka, dalam CI, dalam pementasan, dalam produksi, dan setiap kali metro-config merilis pembaruan. Pendekatan yang lebih baik adalah dengan memotong metro-config di GitHub, melakukan perbaikan, mendorong dan mengirimkan PR untuk memperbaikinya untuk semua orang.
Cameron Wilby
6

Dimulai dengan Android 9.0 (API level 28), dukungan cleartext dinonaktifkan secara default.

Ini adalah apa yang perlu Anda lakukan untuk menyingkirkan masalah ini jika Anda menjalankan perintah yang normal

  1. npm instal
  2. mulai asli
  3. reaksi-asli run-android

Dan modifikasi file manifes android Anda seperti ini.

<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
sumber
5

Setelah jam mencari jawaban. Solusinya adalah membuat simpul downgrade ke versi 12.4.

Dalam kasus saya, saya menyadari bahwa kesalahan hanya terjadi pada versi bereaksi asli 0,60 dengan simpul versi 12,6.

Victor Araújo
sumber
4

Solusi saya untuk ini adalah sebagai berikut:

Mulai server Metro

$ react-native start

Mulai Android

$ react-native run-android

Jika melihat kesalahan yang mengatakan "port 8081 sudah digunakan", maka Anda dapat mematikan proses itu dan jalankan kembali

$ react-native start

Lihat React Native Troubleshooting Page .

Shizhen
sumber
4

Jika Anda berada di linux, buka terminal dari direktori root App dan jalankan

npm start

kemudian buka jendela terminal lain dan jalankan:

react-native run-android
solomon njobvu
sumber
3

Saya hanya ingin menambahkan kemungkinan yang tidak jelas yang tidak dibahas di sini. Saya menggunakan @ react-asli-komunitas / netinfo untuk mendeteksi perubahan jaringan, terutama keadaan jaringan. Untuk menguji keadaan network-off, sakelar WIFI (pada emulator) harus dimatikan. Ini juga secara efektif memotong jembatan antara emulator dan lingkungan debug. Saya belum mengaktifkan kembali WIFI setelah tes karena saya jauh dari komputer dan segera melupakannya ketika saya kembali.

Ada kemungkinan bahwa ini bisa menjadi kasus untuk orang lain juga dan perlu diperiksa sebelum mengambil langkah drastis lainnya.

arunmenon
sumber
3

Saya mengalami masalah yang sama, masalahnya bagi saya adalah adb tidak berada di jalur lingkungan yang benar, kesalahannya memberitahu Anda port metro, saat Anda berada di adb, port terbunuh dan dihidupkan ulang.

Tambahkan Variabel Lingkungan (ADB)

  1. Variabel lingkungan terbuka
  2. Pilih dari variabel PATH bingkai kedua dan klik opsi edit di bawah
  3. Klik pada opsi add
  4. Kirimkan jalur alat platform sdk C: \ Users \ My User \ AppData \ Local \ Android \ Sdk \ platform-tools

Catatan : Atau tergantung di mana terletak adb.exe di mesin Anda

  1. Simpan perubahan

Jalankan android build lagi

$ react-native run-android

Atau

$ react-native start

$ react-native run-android
CarlosChavarria
sumber
3

Saya juga menghadapi masalah ini. Saya menyelesaikan langkah berikut ini.

Periksa jalur sdk android di Lingkungan Benar.

Menambahkan ANDROID_HOME = C:\Users\user_name\AppData\Local\Android\Sdkdalam Sistem Variabel
dan C:\Users\user_name\AppData\Local\Android\Sdk\platform-toolsjalan di Sistem Variable

ganti sharedBlacklist sebagai segmen kode di bawah ini,

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

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

Kemudian jalankan npx react-native run-android --port 9001

Selamat Coding ..!

Chanaka
sumber
2

Saya mengalami ini hanya karena Wifi saya salah dimatikan pada emulator saya. Saya menyalakannya kembali dan mulai bekerja dengan baik. Semoga bermanfaat bagi seseorang

Baba hutan
sumber
2

Solusi yang berhasil bagi saya adalah sebagai berikut:

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

Contoh kode saya

Jorge Santos Neill
sumber
2

perbarui bagian ini dalam daftar hitam metro

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

Saya mengalami masalah yang sama saat mengikuti tutorial React Native (berkembang di Linux dan menargetkan Android).

Masalah ini membantu saya menyelesaikan masalah dalam langkah-langkah berikut. Jalankan perintah berikut dalam urutan di bawah ini:

  1. (dalam direktori proyek) 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

Anda dapat mengotomatiskan langkah-langkah di atas dengan menempatkannya di scriptsbagian package.jsonseperti ini:

"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"

Maka Anda bisa menjalankan npm run android-linuxdari baris perintah Anda setiap saat.

cracknut
sumber
1

Secara default, sebuah server JavaScript kecil bernama "Metro Server" berjalan pada port 8081.

Anda perlu membuat port ini tersedia untuk Server ini untuk memulai. Begitu,

  1. lepaskan port
  2. tutup perangkat virtual Anda
  3. "react-native run-android" lagi.

Bagaimana cara melepaskan port?

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

Bagaimana cara membunuh proses yang saat ini menggunakan port di localhost di windows?

dan yang paling penting, saya memutakhirkan versi simpul saya dari 8.x menjadi 10.x (terbaru), seperti yang disarankan oleh facebook @ https://facebook.github.io/react-native/docs/getting-started

Karthik H
sumber
1

Bagi saya masalah ini dimulai dengan memutakhirkan reaksi asli. Pembaruan itu diperlukan untuk menambahkan dukungan 64-bit.

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

Juga, Satu perubahan penting yang saya buat untuk peningkatan adalah di ../android/build/build.gradle

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

Saya harus mengubah targetSdkVersion dari 27 menjadi 28 setelah peringatan ketika saya mencoba mengunggah build (.apk) ke goole play console. Sedikit yang saya sadari bahwa ini adalah akar penyebab kesalahan di atas bagi saya. Jawaban langsung oleh @tom dan @tinmarfrutos masuk akal.

Saya memecahkan masalah dengan menambahkan android: usingCleartextTraffic = "true" ke android / app / src / debug / AndroidManifest.xml

vivekkan
sumber
1

Dalam kasus saya, saya telah menetapkan proxy di emulator saya. Ini berfungsi kembali normal setelah saya menghapus proxy itu.

Benson
sumber
1

kemungkinan kesalahan ini juga merupakan jalur yang salah, periksa sekali

 export ANDROID_HOME=/Users/microrentindia/Library/Android/sdk/
 export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
pengguna3143487
sumber
Tidak pernah memikirkan hal ini. Tetapi ini adalah jawaban untuk saya.
Siraj Alam
1

PENTING - Anda mungkin memiliki banyak perangkat Virtual di lingkungan Anda. Pastikan jika Anda mengubah AVD Anda mengulangi pengaturan lagi.

INFORMASI DEBUG-

Jika Anda mengalami kesalahan di atas, Anda harus terlebih dahulu memverifikasi apa yang berjalan pada port 8081

Cara tercepat untuk menemukan itu menggunakan perintah berikut di terminal

netstat -aon | findstr 8081

jika itu menunjukkan kepada Anda sesuatu itu berarti port diblokir. jika memungkinkan dapatkan porta tersebut tidak dicekal.

Jika tidak, Anda harus mengubah porta. Proses untuk melakukan itu telah disebutkan dalam komentar di atas oleh Naveen Kumar

react-native run-android --port=9001

Pastikan 9001 juga tidak digunakan :)

TARJU
sumber
1

Coba langkah-langkah ini jika Anda telah mencoba semua yang disebutkan dalam solusi di atas:

  1. Buat File di android / app / src / main / aset
  2. Jalankan perintah berikut:

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

  1. Sekarang jalankan perintah Anda untuk membangun misalnya run-android asli-reaksi
Prayag
sumber
Wow ini membantu saya secara parsial. Saya sedang mempersiapkan aplikasi untuk google play market yang saya lakukan adalah menambahkan ikon aset baru untuk android dan mengubah target versin menjadi 28. Saya harus mengubah kembali ke versi v27 dan semua mulai bekerja lagi ... Saya tidak tahu mengapa bereaksi tidak bekerja dengan SDK v28.
Michail Pidgorodetskiy
0

Coba yang berikut ini.

  1. Hapus folder Android dan iOS
  2. jalankan eject asli-asli
  3. jalankan react-native run-android

Mungkin setelah langkah sebelumnya Anda menjalankan eksekusi npm - --reset-cache

Saya bekerja, saya harap ini membantu Anda.

LuisO
sumber
0

Jika Anda menjalankan pada OS Linux, mungkin ada kasus di mana server jauh npm Anda tidak berjalan. Buka terminal lain (dengan direktori proyek) dan jalankan perintah ini sudo npm start atau sudo react-native start sebelum melakukan sudo react-native run-android

vicky keshri
sumber
0

Pesan kesalahan pada emulator agak menyesatkan. Dalam kasus saya, saya menggunakan Macbook. Saya perlu mengubah izin pada android / gradlew dengan menjalankan $ chmod 755 ./gradlew, dan kemudian aplikasi dapat dibangun dan digunakan untuk emulator android.

Jane
sumber