1. 방금 node.js 및 cli를 설치했습니다.

   • 설치된 node.js

   • react-native-cli 설치

     npm -g react-native-cli

2. 그리고 '새 프로젝트'를 만들었습니다.

   react-native init new_project

3. 그리고 그 'new_project'디렉토리 안에서 메트로 번 들러가 잘 작동하는지보기에 지쳤습니다.

   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를 실행하십시오. 구문 오류 : 잘못된 정규식 : /(.\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이이 문제를 해결하는 두 가지 방법이있는 일반 위치를 처리하는 방식으로 인해 발생합니다.

방법 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 및 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 설치 또는 원사 설치를 실행하는 경우 코드를 다시 변경해야합니다.

두 가지 솔루션이 있습니다.

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

이것은 나를 위해 완벽하게 작동했습니다.

수정 사항이 있는 PR 이 메트로 저장소 에 병합되었습니다 . 이제 다음 릴리스까지 기다려야합니다. 현재 가장 좋은 방법은 NodeJS로 다운 그레이드하는 것 v12.10.0입니다. 로 브랜든 지적, 아무것도 수정 node_modules/ISA 정말 나쁜 연습을하고 최종 해결책이 될 수 없습니다.

내 프로젝트에 메트로 구성이 없습니다. 이제 어떻게합니까?

나는 꽤 이전 프로젝트에 더 있다는 것을 발견 한 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__\/.*/
];

추신 : 나는 두 프로젝트에서 같은 상황에 직면했기 때문에 그것을 공유하면 누군가에게 도움이 될 것이라고 생각했습니다.

편집하다

@beltrone의 의견에 따라 파일이 존재할 수도 있습니다.

node_modules \ metro \ src \ blacklist.js

나는 같은 문제가 있습니다.

"오류 유효하지 않은 정규식 : / (. \ fixtures \. | node_modules [\] react [\] dist [\]. | website \ node_modules \. | heapCapture \ bundle.js |. \ tests \. ) $ / : Unterminated 캐릭터 클래스. "

정규식 변경 \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

react-native, expo의 공식 패치없이 여전히이 오류가 발생하는 사용자

yarn을 사용하고이 설정을 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- 시스템 드라이브 인 bash /

도움이 되었기를 바랍니다.

변경하기 위해 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 덕분에