구글에 위와 같은 제목으로 오류를 검색하면 다음과 같은 명령을 실행하라고 많이 나온다.
npm update
npm start
yarn upgrade
yarn start
하지만 내 경우는 계속해서 같은 오류가 발생했고 다음 명령을 실행하고 해결할 수 있었다.
yarn add global react-scripts
npm install -g react-scripts //나는 yarn을 써서 이렇게 하는게 맞는지 모르겠다.
당신도 오류가 해결됐기를 빌어보면서 왜 이런 오류가 발생했고 어째서 해결됐는지 나름대로 이해한 내용을 설명하겠다.
원래 yarn에 'start'라는 명령어는 없다.(대신 yarn run이라고 정의된 명령이 실행되기는 한다. 참고로 npm start는 있다) yarn start 라는 명령을 실행하면 현 디렉토리 package.json이 있는지 찾아보고 scripts에 정의된 start 명령을 실행 시킨다.
// ./package.json
"scripts": {
"start": "cross-env NODE_PATH=src react-scripts start",
"build": "cross-env NODE_PATH=src react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},내 경우는 yarn start 라는 명령은 yarn run cross-env NODE_PATH=src react-scripts start와 같다.
react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다
이런 오류가 발생하는 이유는 react-scripts라는 라이브러리(프로그램/명령)을 현재 경로에서 실행시킬수 없는 상황이기 때문이다.
옛날 버전을 받았든 뭐든 어떤 이유로 react-scripts모듈이 제대로 설치되지 않았고 react-scripts모듈을 설치하면 문제는 해결된다.
yarn add global react-scripts
그리고 위 명령은 react-scripts라는 라이브러리를 전역으로 설치하라는 명령이다. react-scripts를 전역으로 설치했음으로 yarn이 어디서나 react-scripts이 무슨 명령인지 알아들을 수 있고 오류가 발생하지 않았다.
마지막으로 react-scripts가 뭔지 설명하면 노드js 모듈로 create-react-app으로 프로젝트를 만들었을 때 같이 설치된다. 알겠지만 create-react-app은 간편하고 빠르게 react프로젝트를 시작할 수 있도록 귀찮은 설정을 대신해주는 모듈로 여러분은 아마 create-react-app으로 react프로젝트를 시작했을 것이다. 왜냐면 react-scripts는 create-react-app만을 위해 만들어진 모듈이기 때문이다. 설정과 스크립트를 포함한 패키지라는데 babel이나 webpack따위를 포함한다. 정확히 뭔지는 모르겠다.
참고 ~ 나의 경우 윈도우에서 create-react-app으로 앱을 만들었고 경로 설정을 위해 cross-env를 도입하던 중 오류가 발생했다.
나처럼 전역(global)으로 react-scripts를 업데이트하는 방법은 좀 멍청한 짓인 것 같다. create-react-app으로 만든 package.json이 있는디렉토리에서
yarn add react-scripts
nap install -save react-scripts
명령을 실행하면 된다.
yarn upgrade
만 실행시켜도 되는게 맞는데 내 경우는 왜 그랬는지 모르겠다.
혹시 위에 쓴 글을 모두 따라해 버렸고 전역으로 설치한 react-scripts가 거슬린다면 yarn remove global react-scripts 를 실행하고 작업중인 react디렉터리에서 yarn add react-scripts 다시 실행하면 된다.