React를 공부하고 있는 중입니다.
React를 공부하려다 그동안 확바뀐 Node.js 까지 익히는 중입니다 ㅎㅎ
npm의 유틸리티중 하나인 npx를 이용해서 create-react-app 패키지를 설치하고
이를 이용한 보일러 플레이팅을 하는 것이 보고 있는 책의 예제입니다.
그런데!
놀랍게도 (언제나 그렇듯이) 개발 환경 구성부터 산넘어 산입니다.
오늘 만난 에러는 npx를 이용한 React 보일러 플레이팅 중 발생했습니다.
% npx create-react-app test
npm ERR! cb.apply is not a function
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/nopd/.npm/_logs/2022-02-05T17_54_47_354Z-debug.log
[ 'create-react-app@latest' ] 설치가 오류 코드 1로 실패했습니다뭔가 발음하기에도 거시기한 cb.apply가 함수가 아니라는 에러!
아버지를 아버지라 부르지 못하고... 함수를 함수라 부르지 못하는 것인가 싶었지만 차치하고...
몇 군데 검색을 해봐도 딱히 쓸만한 방법을 찾질 못했습니다.
구글 검색에서 걸린 것들은 대부분,
- node_module 관련 경로를 다 지우고 다시 해봐라
- node 버전을 올려라
- 캐시를 지워라
정도였던 것으로 기억됩니다.
안타깝게도 전부 저한테는 쓸모가 없었습니다.
뭐가 문제일까 하다가 발견한 것이 Mac 환경에서 brew로 설치한 패키지들과
설치된 경로를 알긴 어렵지만, 여튼 설치되어 있는 node 관련 패키지들이
서로 다른 경로에 있지만 후자가 우선순위를 갖게 되면서 문제처럼 보였습니다.
사실 create-react-app 을 설치하기 전에도
node의 버전이 brew에서 확인되는 것과 다르네? 하면서
/usr 하위에 만들어져 있던 심링크를 삭제했던 기억이 뇌리를 스쳤습니다.
혹시 npx도..!?!?!?!?!
정답이었습니다.
brew로 최신 버전의 npx를 설치했지만,
이는 which npx 로 확인했을 때의 경로와 차이가 있었습니다.
// #################### BEFORE
% which npx
/usr/local/bin/npx
// #################### AFTER
% which npx
/opt/homebrew/bin/npx그렇습니다.
brew는 독립적인 생명체라, /opt/homebrew/bin 하위에 패키지를 저장하고 있었습니다.
원래 /usr/local/bin 경로에 있던 npx를 과감하게 삭제하니 모든것이 정상으로 돌아왔습니다!
% npx create-react-app test
Need to install the following packages:
create-react-app
Ok to proceed? (y)
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
Creating a new React app in /Users/nopd/dev/clonecoding_practice/test.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1365 packages in 47s
169 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
added 33 packages in 2s
169 packages are looking for funding
run `npm fund` for details
Removing template package using npm...
removed 1 package, and audited 1398 packages in 1s
169 packages are looking for funding
run `npm fund` for details
8 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Created git commit.
Success! Created test at /Users/nopd/dev/clonecoding_practice/test
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd test
npm startMac 환경에서 brew를 이용해서 node를 설치했고
혹시나 pkg 를 다운로드받아 설치한 적이 있는 것 같은 기억이 있다면
포스팅에 소개한 방법을 이용해 평안한 하루를 만드시기 바라겠습니다!