web-dev-qa-db-ja.com

「react-native start」のエラーを解決する方法

  1. Node.jsとcliをインストールしました

    • インストールされたnode.js

    • インストールされたreact-native-cli

      npm -g react-native-cli

  2. そして、「新しいプロジェクト」を作成しました。

    react-native init new_project

  3. そして、その「new_project」ディレクトリ内で、metro bundlerがうまく機能するかどうかを確認するのに疲れました。

    react-native start

  4. しかし、コマンドによって次のエラーが発生し、メトロが起動しません。このエラーを修正するための手がかりはありますか？ （Windows 10 OSを使用しています。）

    • コマンド：C:\projects\new_proj>react-native start

      エラー無効な正規表現：/(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/：終了していない文字クラス。詳細については、-verboseフラグを指定してCLIを実行してください。 SyntaxError：無効な正規表現：/(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/：新しいRegExpで終了していない文字クラス（ ）ブラックリスト（D：\ projects\new_proj\node_modules\metro-config\src\defaults\blacklist.js：34：10）at getBlacklistRE（D：\ projects\new_proj\node_modules\react-native\node_modules @ react-native -community\cli\build\tools\loadMetroConfig.js：69：59）at getDefaultConfig（D：\ projects\new_proj\node_modules\react-native\node_modules @ react-native-community\cli\build\tools\loadMetroConfig.js ：85：20）ロード時（D：\ projects\new_proj\node_modules\react-native\node_modules @ react-native-community\cli\build\tools\loadMetroConfig.js：121：25）at Object.runServer [as func ]（D：\ projects\new_proj\node_modules\react-native\node_modules @ react-native-community\cli\build\commands\server\runServer.js：82：58）at Command.handleAction（D：\ projects\new_proj\node_modules\react-native\node_modules @ react-native-community\cli\build\cliEntry.js：160： 21）Command.listener（D：\ projects\new_proj\node_modules\commander\index.js：315：8）at Command.emit（events.js：210：5）at Command.parseArgs（D：\ projects\new_proj\node_modules\commander\index.js：651：12）

reactjsreact-nativereact-native-androidreact-native-climetro-bundler
99
Song Kevin

今日、初めて同様のエラーが発生しました。 \node_modules\metro-config\src\defaults\blacklist.jsに表示されますが、変更が必要な無効な正規表現があります。 sharedBlacklistの最初の式を次のように変更しました：

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

に：

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

これは、ノードv12.11.0が原因で発生します。この問題を解決する方法は2つあります。

方法I

ノードv12.10.0にダウングレードできます。これにより、解析エラーに対処する正しい方法が適用されます

方法II

次の場所にあるファイルを変更することで、正規表現を正しく終了できます。

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

から：

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

に：

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

[素早い回答]

NPMとNodeバージョンを使用しているMetroには問題があります。

ファイル\node_modules\metro-config\src\defaults\blacklist.jsの一部のコードを変更する問題を修正できます。

この変数を検索：

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

これに変更してください：

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

Npmインストールまたはyarnインストールを実行する場合、コードを再度変更する必要があることに注意してください。

17
Javier C.

あなたには2つの解決策があります：

ノードをV12.10.0にダウングレードするか、作成するプロジェクトごとにこのファイルを変更できます。

node_modules/metro-config/src/defaults/blacklist.jsこれを変更：

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

これに：

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

プロジェクトでE：\ NodeJS\ReactNativeApp\ExpoTest\node_modules\metro-config\src\defaults\blacklist.jsを変更したのと同じ問題が発生しました

から

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

に

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

これは完璧に機能しました

8
nelajala nelajala

[〜＃〜] pr [〜＃〜] の修正が metro リポジトリにマージされました。次のリリースまで待つ必要があります。現時点では、最良のオプションはNodeJS v12.10.0にダウングレードすることです。 Brandon が指摘したように、node_modules/のすべてを変更することは非常に悪い習慣であり、最終的な解決策にはなりません。

3
JoseLion

に行く

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

そしてこれを交換してください

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

に

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

これはベストプラクティスではなく、私の推奨事項は次のとおりです。ノードバージョンを12.9にダウングレードするOR Metro-configを更新するNode問題を修正しているため。

1
Lahiru Amarathunge

https://github.com/facebook/metro/issues/45

反応ネイティブ、エキスポの公式パッチなしでまだこのエラーが発生する人のために

糸を使用し、この設定をpackage.jsonに追加します

{
  ...
  "resolutions": {
    "metro-config": "bluelovers/metro-config-hotfix-0.56.x"
  },
 ...
1
bluelovers

彼らが問題を修正していた最新バージョン（現時点では0.57.0）のmetro-configをインストールして修正します。

npmはmetro-configをインストールします

反応ネイティブの人がモジュールのバージョンを更新した後で、後でそれを削除できます

0
KEMBL

原則として、node_modules/内のファイル（またはリポジトリの一部としてコミットされないもの）は変更しません。これは、次のクリーンアップ、ビルド、または更新によってリグレッションが発生するためです。私は間違いなく過去にそうしたことがあります、そしてそれは私を数回噛みました。しかし、これはmetro-configが更新されるまで、またはそうでない限り、短期的/ローカルの開発フィックスとして機能します。

ありがとう！

0
Brandon Gohsman

Windows 10では、Linux Bash Shellをインストールすることを強くお勧めします。

これを設定するための素晴らしいガイドは次のとおりです： https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-Shell-on -windows-10 /

手順に従って、Linuxディストリビューションを選択し、明らかな不安定性があるため、cmdでノードを操作することはできるだけ避けてください。

ここで説明するように、MicrosoftはWindowsソフトウェアでLinuxファイルを追加または変更しないように強く警告しています： howtogeek.com/261383/how-to-access-your-ubuntu-bash-files-in -windows-and-your-windows-system-drive-in-bash /

それが役に立てば幸い！

0
Avatazjoe

Regexp.sourceがnode v12.11.0、おそらく新しいv8エンジンが原因です。詳しくは https://github.com/nodejs/node/releases/tag/v12.11. をご覧ください。

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[\\\\\\].*'
>
0
Donghua Liu

プロジェクトディレクトリのnode_modulesに移動して、metro-config\src\defaults\blacklist.jsを探し、var blacklist: = {....}から

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

あなたは行くことができます...

\ node_modules\metro-config\src\defaults\blacklist.jsおよび変更...

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

このため：

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

糸の使用はこの状況を防ぎます。糸は使用する必要があります

0
Gucal

変更するpackage.jsonを更新しました

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

に

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

sdk-36では問題が発生しないようです!!

私のノードのバージョンはv12.16.で、osはwin1です。

0
anson