Cara mengatasi kesalahan pada 'react-native start'

117

  1. Saya baru saja menginstal node.js & cli

    • node.js diinstal

    • menginstal react-native-cli

      npm -g react-native-cli

  2. Dan membuat 'proyek baru'.

    react-native init new_project

  3. dan di dalam direktori 'new_project' itu, saya lelah melihat apakah metro bundler berfungsi dengan baik.

    react-native start

  4. Tetapi perintah memberi saya kesalahan berikut dan metro tidak dimulai. Ada petunjuk untuk memperbaiki kesalahan ini? (Saya menggunakan Windows 10 OS.)

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

      kesalahan Ekspresi reguler tidak valid: /(.\fixtures.i>node_modules[]react[]dist[].]website\node_modules. ThursheapCapture\bundle.jsi>.\tests.)$/: Kelas karakter tak terhentikan. Jalankan CLI dengan --verbose flag untuk lebih jelasnya. SyntaxError: Ekspresi reguler tidak valid: /(.\fixtures. incrednode_modules[]react[]dist[].]website\node_modules. ThursheapCapture\bundle.jsi>.\tests.)$/: Kelas karakter tak terhentikan di RegExp baru ( ) di daftar hitam (D: \ projects \ new_proj \ node_modules \ metro-config \ src \ defaults \ blacklist.js: 34: 10) di getBlacklistRE (D: \ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native -community \ cli \ build \ tools \ loadMetroConfig.js: 69: 59) di getDefaultConfig (D: \ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native-community \ cli \ build \ tools \ loadMetroConfig.js : 85: 20) saat memuat (D:

reactjs  react-native  react-native-android  react-native-cli  metro-bundler 
— Lagu Kevin
sumber
Seperti yang mereka katakan Run CLI with --verbose flag for more details.Mungkin Anda lupa melarikan diri dari garis miring terbalik. Lihat stackoverflow.com/questions/14639339/… . Tidak bisa mengatakan tanpa detail lebih lanjut.
— rhand
Kalau-kalau metro-config tidak ada di node_modules untuk Anda, periksa jawaban saya di bawah ini.
— gprathour

Jawaban:

250

Saya baru saja mendapat kesalahan serupa untuk pertama kalinya hari ini. Tampak di \node_modules\metro-config\src\defaults\blacklist.js, ada ekspresi reguler tidak valid yang perlu diubah. Saya mengubah ekspresi pertama di bawah sharedBlacklistdari:

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

untuk:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
— Clem
sumber
1
Terima kasih banyak! Saya membuat perubahan seperti yang Anda katakan dan berhasil sekarang. Apakah saya harus memodifikasi ini pada setiap proyek atau adakah cara untuk menerapkannya secara global?
— Lagu Kevin
11
Mendapat jawaban lain dari kueri di Github. - 'Ini disebabkan oleh node v12.11.0, downgrade ke v12.10.0 akan menyelesaikannya.' Itu dari Leo. Lee. Dan saya juga perlu melihat apakah itu berhasil atau tidak.
— Lagu Kevin
3
Perbaikan luar biasa! Terima kasih banyak. React Native tampaknya seperti perjalanan buggy, dari cache npm yang rusak, hingga kesalahan PERM. Saya butuh dua hari hanya untuk menginstal.
— EdNdee
4
/node_modules[\/\]react[\/\]dist[\/\].*/, Hanya baris ini yang perlu diubah
— vivek
1
Terima kasih banyak! Ini menghemat banyak waktu saya. Saya baru saja meningkatkan Node.js saya dari v8.xx ke v12.13.0 di malam ini dan kemudian kesalahan ini tiba-tiba yang menyebabkan kegagalan mulai aplikasi ... tidak sadar itu disebabkan oleh bug ini tanpa posting ini ...
— garykwwong
107

Hal ini disebabkan oleh node v12.11.0 karena cara menangani lokasi biasa ada dua cara untuk mengatasi masalah ini

Metode I

Anda dapat menurunkan versi ke node v12.10.0 ini akan menerapkan cara yang benar untuk menangani kesalahan penguraian

Metode II

Anda dapat dengan benar menghentikan ekspresi reguler dalam kasus Anda dengan mengubah file yang terletak di:

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

Dari:

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

Untuk:

 var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
— Charles
sumber
2
ini sangat membantu, tidak bisakah kalian mengirimkan permintaan tarik? ke metro-configatau expo-cli?
— its4zahoor
1
Permintaan penarikan dikirim kembali pada bulan Oktober: github.com/facebook/metro/commit/…
— schellack
20

[Jawaban cepat]

Ada masalah dengan Metro menggunakan beberapa versi NPM dan Node.

Anda dapat memperbaiki masalah dengan mengubah beberapa kode di file \node_modules\metro-config\src\defaults\blacklist.js.

Cari variabel 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 instalasi npm atau instalasi benang, Anda perlu mengubah kode lagi.

— Javier C.
sumber
Apakah masalah ini tidak bisa diperbaiki oleh pengembang? Setiap kali saya datang ke sini. Terima kasih Pak
— Hasan Basri
1
Ya, masalahnya bisa diperbaiki oleh pengembang metro yang melakukan perubahan ini.
— Javier C.
2
Terima kasih! Ini memperbaikinya!
— Robert
Saya tidak berpikir ini adalah solusi yang baik. memodifikasi file di dalam node_modules
— CodeMind
1
Perhatikan bahwa jika Anda menggunakan versi lama react-native (mis. 0.51.0), file yang akan diubah adalah di:.\node_modules\metro-bundler\src\blacklist.js
— Venryx
20

Anda memiliki dua solusi:

baik Anda menurunkan versi node ke V12.10.0 atau Anda dapat memodifikasi file ini untuk setiap proyek yang akan Anda buat.

node_modules / metro-config / src / defaults / blacklist.js Ubah ini:

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

untuk ini:

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

Saya memiliki masalah yang sama dengan saya mengubah E: \ NodeJS \ ReactNativeApp \ ExpoTest \ node_modules \ metro-config \ src \ defaults \ blacklist.js di proyek saya

dari 

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

untuk

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

ini bekerja dengan sempurna untuk saya

— nelajala nelajala
sumber
5

Sebuah PR dengan memperbaiki telah bergabung di metro repositori. Sekarang kita tinggal menunggu sampai rilis berikutnya. Untuk saat ini, opsi terbaik adalah menurunkan versi ke NodeJS v12.10.0. Seperti yang ditunjukkan Brandon , memodifikasi apa pun dalam node_modules/isa praktik yang sangat buruk dan tidak akan menjadi solusi akhir.

— JoseLion
sumber
5

Saya tidak memiliki metro-config dalam proyek saya, sekarang bagaimana?

Saya telah menemukan bahwa dalam proyek yang cukup lama tidak ada kata metro-configmasuk node_modules. Jika demikian halnya dengan Anda, maka,

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

Dan lakukan langkah yang sama seperti yang disebutkan dalam jawaban lain, yaitu

Menggantikan

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

PS Saya menghadapi situasi yang sama dalam beberapa proyek jadi berpikir berbagi itu mungkin membantu seseorang.

Edit

Sesuai komentar oleh @beltrone, file tersebut mungkin juga ada di,

node_modules \ metro \ src \ blacklist.js

— gprathour.dll
sumber
1
Apakah membantu, tetapi file di 360 init saya ada di MyProject\node_modules\metro\src\blacklist.js. Bersulang.
— beltrone
4

Saya punya masalah yang sama.

"kesalahan Ekspresi reguler tidak valid: / (. \ fixture \. | node_modules [\] react [\] dist [\]. | website \ node_modules \. | heapCapture \ bundle.js |. \ tes \. ) $ /: Tidak dihentikan kelas karakter. "

Ubah ekspresi reguler dalam \node_modules\metro-config\src\defaults\blacklist.js

Dari

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

Untuk

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

Perubahan ini menyelesaikan kesalahan saya.

— Mishan Madhupa
sumber
2

Pergi ke

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

dan ganti ini

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

untuk

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

Ini bukan praktik terbaik dan rekomendasi saya adalah: turunkan versi node ke 12.9 ATAU perbarui metro-config karena mereka memperbaiki masalah Node.

— Lahiru Amarathunge
sumber
1

Anda dapat pergi ke ...

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

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

untuk ini:

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

Sebagai aturan umum, saya tidak mengubah file di dalam node_modules/(atau apa pun yang tidak dikomit sebagai bagian dari repositori) karena pembersihan, pembuatan, atau pembaruan berikutnya akan menurunkannya. Saya pasti pernah melakukannya di masa lalu dan itu telah menggigit saya beberapa kali. Tetapi ini berfungsi sebagai perbaikan pengembang jangka pendek / lokal sampai / kecuali metro-configdiperbarui.

Terima kasih!

— Brandon Gohsman
sumber
0

Saya menemukan regexp.source diubah dari node v12.11.0, mungkin v8disebabkan oleh mesin baru . lihat lebih lanjut di 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
sumber
0

Perbaiki dengan menginstal metro-config dari versi terbaru (0.57.0 untuk saat ini) mereka telah memperbaiki masalah:

npm instal metro-config

Anda dapat menghapusnya nanti, setelah react-native guys memperbarui versi modul

— KEMBL
sumber
Itu tidak membantu saya.
— Velizar Andreev Kitanov
0

Penggunaan benang mencegah situasi ini. Benang harus digunakan

— Gucal
sumber
0

Di windows 10 saya sangat merekomendasikan untuk menginstal Linux Bash Shell.

Berikut adalah panduan yang bagus untuk mengaturnya: https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/

cukup ikuti langkah-langkahnya, pilih distribusi linux Anda dan hindari sebanyak mungkin bekerja dengan node pada cmd karena ketidakstabilan yang jelas.

Pertimbangkan Microsoft sangat memperingatkan agar tidak menambahkan atau memodifikasi file Linux dengan perangkat lunak Windows, seperti yang dijelaskan di sini: howtogeek.com/261383/how-to-access-your-ubuntu-bash-files-in-windows-and-your-windows- system-drive-in-bash /

Semoga membantu!

— Avatazjoe
sumber
0

Saya baru saja memperbarui package.json untuk mengubah dari

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

untuk

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

Tampaknya masalah tidak akan terjadi di sdk-36 !!

Versi node saya adalah v12.16.0 dan os adalah win10 .

— anson
sumber
0

Solusinya sederhana, tapi sementara ...

Perhatikan bahwa jika Anda menjalankan npm installatau yarn installAnda perlu mengubah kode lagi!

Jadi, bagaimana kita bisa menjalankannya secara otomatis?

Solusi permanen

Untuk melakukan ini "secara otomatis" setelah menginstal modul node Anda, Anda dapat menggunakan patch-package.

  1. Perbaiki metro-configfile, selesaikan kesalahan:

File muncul di \node_modules\metro-config\src\defaults\blacklist.js.

Edit dari:

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

Untuk: 

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
  1. Kemudian, buat file patch permanen:

npx patch-package metro-config

  1. Di package.jsonpemicu Anda , tambalan:
"scripts": {
+  "postinstall": "npx patch-package"
}

Semua selesai! Sekarang tambalan ini akan dibuat di setiap npm install/ yarn install.

Terima kasih untuk https://github.com/ds300/patch-package

— Maycon Mesquita
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.