[React] The “path” argument must be of type string. 문제 해결

Create-React-App 프로젝트를 빌드하거나 개발 환경에서 테스트하는 경우 npm run start 또는 yarn start와 같은 명령어를 사용합니다. 그런데 언제부턴가 아래와 같이 에러 메시지가 나타나며 진행되지 않는 경우가 있습니다.

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at validateString (internal/validators.js:112:11)
    at Object.join (path.js:375:7)
    at noopServiceWorkerMiddleware (C:\MyProject\mysite\client\node_modules\react-dev-utils\noopServiceWorkerMiddleware.js:14:26)
    at Layer.handle [as handle_request] (C:\MyProject\mysite\client\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\MyProject\mysite\client\node_modules\express\lib\router\index.js:317:13)
    at C:\MyProject\mysite\client\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\MyProject\mysite\client\node_modules\express\lib\router\index.js:335:12)
    at next (C:\MyProject\mysite\client\node_modules\express\lib\router\index.js:275:10)
    at launchEditorMiddleware (C:\MyProject\mysite\client\node_modules\react-dev-utils\errorOverlayMiddleware.js:20:7)
    at Layer.handle [as handle_request] (C:\MyProject\mysite\client\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\MyProject\mysite\client\node_modules\express\lib\router\index.js:317:13)
    at C:\MyProject\mysite\client\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\MyProject\mysite\client\node_modules\express\lib\router\index.js:335:12)
    at next (C:\MyProject\mysite\client\node_modules\express\lib\router\index.js:275:10)
    at handleWebpackInternalMiddleware (C:\MyProject\mysite\client\node_modules\react-dev-utils\evalSourceMapMiddleware.js:42:7)
    at Layer.handle [as handle_request] (C:\MyProject\mysite\client\node_modules\express\lib\router\layer.js:95:5)

내용이 길지만 핵심은 가장 윗줄에 있는 에러입니다.

The "path" argument must be of type string. Received type undefined

해결 방법

이 문제를 해결하기 위해서는 react-scripts 패키지의 요구 버전을 수정해야 합니다. 먼저 React 프로젝트의 package.json 파일을 열어 dependencies를 확인합니다.

"dependencies": {
    ...
    "react-scripts": "3.3.1"
    ...
}

여기서 react-scripts 패키지의 버전을 확인합니다.

path argument must be of type string 이슈는 react-scripts 3.4.0 버전에서 수정되었습니다. 따라서 최소 요구 버전을 3.4.0 이상으로 올려주어야 합니다. 다음과 같이 수정합니다.

   "react-scripts": "^3.4.0"

이제 불필요한 패키지 관련 캐시를 제거하기 위해 node_modules 폴더를 지워주겠습니다. 터미널에서 rm 명령으로 지우거나 직접 파일 탐색기에서 node_modules 폴더를 지웁니다.

다음으로 package-lock.json 파일이 존재한다면 이 또한 지워주도록 합니다.

이후 터미널에서 npm 명령어를 사용하여 패키지를 모두 재설치합니다. 모든 패키지를 삭제했으므로 재설치에 시간이 소요될 수 있습니다.

$ npm install

설치가 모두 완료되었다면 다시 프로젝트를 빌드하거나 react-scripts를 실행하여 문제가 발생하는지 확인해봅니다.

참고자료

• The “path” argument must be of type string: https://stackoverflow.com/questions/60234640/typeerror-err-invalid-arg-type-the-path-argument-must-be-of-type-string-re