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：

今日、初めて同様のエラーが発生しました。に表示されていますが\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__\/.*/
];

これは、ノード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__\/.*/
];

[素早い回答]

一部のNPMおよびノー​​ドバージョンを使用している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インストールを実行する場合、コードを再度変更する必要があることに注意してください。

あなたには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__\/.*/
];

プロジェクトで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__\/.*/
];

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

A PRの修正とはしてマージされた地下鉄のリポジトリ。次のリリースまで待つ必要があります。今のところ、最良のオプションはNodeJSにダウングレードすることですv12.10.0。以下のようブランドンは指摘し、中には何も変更するnode_modules/ISA本当に悪い練習をし、最終的なソリューションではありません。

プロジェクトにmetro-configがありませんが、どうしますか？

私はかなり古いプロジェクトにはがないことを発見しましmetro-configたnode_modules。それがあなたの場合だとしたら、

node_modules / metro-bundler / src / 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__\/.*/
];

PS私はいくつかのプロジェクトで同じ状況に直面したので、それを共有することが誰かを助けるかもしれないと考えました。

編集する

@beltroneによるコメントのとおり、ファイルは次の場所にも存在する可能性があります。

node_modules \ metro \ src \ blacklist.js

同じ問題が発生しました。

"エラー無効な正規表現：/（。\ フィクスチャ \。 | node_modules [\] react [\] dist [\]。| website \ node_modules \。 | heapCapture \ bundle.js |。\ tests \。）$ /：終了していません文字クラス。」

の正規表現を変更する \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__\/.*/
];

この変更により、エラーが解決されました。

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

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

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

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

に行く

\ 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にダウングレードするか、ノードの問題を修正しているため、metro-configを更新します。

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

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

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

ありがとう！

regexp.sourceがから変更されたことがわかりました。node v12.11.0おそらく、新しいv8エンジンが原因です。詳しくは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[\\\\\\].*'
>

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

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

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

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

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-システムドライブインバッシュ/

それが役に立てば幸い！

変更する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.0で、osはwin10です。

解決策は簡単ですが、一時的です...

を実行した場合、コードを再度変更する必要がnpm installあるyarn installことに注意してください！

では、どうすればこれを自動的に実行できますか？

永続的なソリューション

ノードモジュールをインストールした後、これを「自動的に」行うには、を使用できますpatch-package。

1. metro-configエラーを解決してファイルを修正します。

ファイルはに表示され\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__\/.*/
];

2. 次に、永続的なパッチファイルを生成します。

npx patch-package metro-config

3. あなたにpackage.jsonトリガーパッチ：

"scripts": {
+  "postinstall": "npx patch-package"
}

すべて完了！現在、このパッチはnpm install/ ごとに作成されますyarn install。

https://github.com/ds300/patch-packageに感謝