[React] yarn v1.19.1 update후 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined 에러 발생

Github에 리액트 프로젝트를 올리다 보면, 가끔 버전 업데이트를 하라는 메시지가 뜨곤 한다.

하여 필자는 오늘도 마찬가지로 yarn upgrade 명령어를 쳤드랬다.

쭉쭉 업데이트 한 후, yarn install을 하고 yarn start를 하니, 아래와 같은 에러가 발생했다.

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at assertPath (path.js:39:11)
    at Object.join (path.js:432:7)
    at noopServiceWorkerMiddleware (D:\Develope\front_workspace\shin-front\node_modules\react-dev-utils\noopServiceWorkerMiddleware.js:14:26)
    at Layer.handle [as handle_request] (D:\Develope\front_workspace\shin-front\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (D:\Develope\front_workspace\shin-front\node_modules\express\lib\router\index.js:317:13)
    at D:\Develope\front_workspace\shin-front\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (D:\Develope\front_workspace\shin-front\node_modules\express\lib\router\index.js:335:12)
    at next (D:\Develope\front_workspace\shin-front\node_modules\express\lib\router\index.js:275:10)
    at launchEditorMiddleware (D:\Develope\front_workspace\shin-front\node_modules\react-dev-utils\errorOverlayMiddleware.js:20:7)
    at Layer.handle [as handle_request] (D:\Develope\front_workspace\shin-front\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (D:\Develope\front_workspace\shin-front\node_modules\express\lib\router\index.js:317:13)
    at D:\Develope\front_workspace\shin-front\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (D:\Develope\front_workspace\shin-front\node_modules\express\lib\router\index.js:335:12)
    at next (D:\Develope\front_workspace\shin-front\node_modules\express\lib\router\index.js:275:10)
    at handleWebpackInternalMiddleware (D:\Develope\front_workspace\shin-front\node_modules\react-dev-utils\evalSourceMapMiddleware.js:42:7)
    at Layer.handle [as handle_request] (D:\Develope\front_workspace\shin-front\node_modules\express\lib\router\layer.js:95:5)

아, 이게 뭔가.. 아무리 구글링을 해도 나오질 않는다.
죄다 "react-scripts": "^3.4.0" 이야기만 나오고 뭔지 모르겠다.

그러나 공통적인 의견은, 이번에 업데이트 된 react-dev-utils ^10.0.2에 문제가 있다는 것이다.

수많은 삽질 끝에, 방법은 한가지 뿐인 것 같다.
react-dev-utils를 롤백하는 것!

사람마다 다르고, npm을 사용하는 사람들도 있겠지만, 필자는 yarn을 사용하고 있기에 혹시나 필자와 같은 증상을 겪고 있을 분들을 위해 남긴다.

yarn.lock 파일에서, 아래와 같이 react-dev-utils를 검색하여 아래 부분으로 붙여넣은 후, yarn install을 실행하면 된다.

react-dev-utils@^10.0.0:
  version "10.0.0"
  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.0.0.tgz#bd2d16426c7e4cbfed1b46fb9e2ac98ec06fcdfa"
  integrity sha512-8OKSJvl8ccXJDNf0YGw377L9v1OnT16skD/EuZWm0M/yr255etP4x4kuUCT1EfFfJ7Rhc4ZTpPTfPrvgiXa50Q==
  dependencies:
    "@babel/code-frame" "7.5.5"
    address "1.1.2"
    browserslist "4.7.3"
    chalk "2.4.2"
    cross-spawn "6.0.5"
    detect-port-alt "1.1.6"
    escape-string-regexp "1.0.5"
    filesize "3.6.1"
    find-up "3.0.0"
    fork-ts-checker-webpack-plugin "3.1.0"
    global-modules "2.0.0"
    globby "8.0.2"
    gzip-size "5.1.1"
    immer "1.10.0"
    inquirer "6.5.0"
    is-root "2.1.0"
    loader-utils "1.2.3"
    open "^7.0.0"
    pkg-up "2.0.0"
    react-error-overlay "^6.0.4"
    recursive-readdir "2.2.2"
    shell-quote "1.7.2"
    strip-ansi "5.2.0"
    text-table "0.2.0"

글쎄, 정확한 원인은 모르겠고 진짜 업데이트 되면서 내부에서 crash가 난 것일지도 모르지만, 필자가 한시간여를 삽질하며 발견한 유일한 방법은 react-dev-utils를 롤백하는 방법 뿐이었다.

해결될 때까지 좀 기다려 봐야겠다.
원인을 좀 파악한다면 이어서 포스팅하겠다.

혹시나 같은 증상을 겪고있는 분이 계시다면 알려주시면 감사하겠습니다~

===> 2020. 05.01 내용 수정

아무리 구글링 해서 나온 방법을 적용해도, 많은 분들이 알려주신 방법으로 해도 해결이 안되어서, 결국 npx create-react-app를 사용해서 프로젝트를 다시 파서 해결했다.

댓글에서도 말씀해주셨듯, xx.json-lock을 수정하는건 그리 좋은 방법은 아닌 듯 하다.
npm/yarn install등을 하면 도루묵이 되므로..

원인을 생각해보면, 필자는 '리액트를 다루는 기술' 도서에 나온 과정 중 yarn eject를 사용했는데, 아마도 여기서 파일들을 잘못 건들여 어딘가 꼬인게 아닐까 싶다.

또는 package.json 파일을 잘못 수정하여 install을 했던가..

수정하여 해결해보고 싶었는데, 결국 원인을 찾지 못해 속상하다. 앞으로는 이런 에러가 나오지 않길..