가장 기초적인 부분이지만, 오랫동안 리액트를 건드리지 않고, 이제 갓 프로그래밍을 입문했는데 하필 리액트부터 건드린 사람들을 위해서 당황스러운 부분이었던, node-module이 없을 때의 해결방법을 적어본다.

 

우선 이 상황이 발생하게 되는 이유는, 

다른 사람의 코드를 공유받았을 때 (예를 들어 github에서 clone을 했을 때),

node-module의 경우 기본 개발환경을 위한 파일들이기 때문에 건드릴 일이 없으며, 또한 폴더의 크기도 너무 크기 때문에 공유를 하지 않는 것 같다.

따라서, 나머지의 폴더와 파일들을 받게 되는데,

이때 yarn start 혹은 npm start를 하더라도 node-module이 없기 때문에 코드가 실행이 제대로 되지 못한다.

 

node-module이 없이 공유받았다
node-module이 없는 상태에서 yarn start를 할 경우 위와 같은 메시지가 뜬다.

 

 


 

이럴 때에 해결방법은 매우 간단하다.

결국 node-module만 install 해주면 된다.

해당 파일에서 yarn install 혹은 npm install을 해주면 끝!

yarn install 하면 나타나는 화면
yarn install 하고 하고 나서 모습

팀 프로젝트를 하다 보면 다른 사람의 github에서 코드를 clone 하거나 다운로드를 해서 사용하는 경우가 많다.

이번에도 이렇게 사용을 하던 중, React에 관해서 에러가 계속 나서 문제가 생겼던 부분이 있다.

바로 node의 버전이 안 맞아서 계속 에러가 나는 부분인데, 이 부분의 해결방법에 대해서 정리해보고자 한다 (사실 스스로도 나중에 방법을 잊어먹을까 봐 정리하는 느낌도 있다... ㅎ)

 

일단 에러 코드는 다음과 같이 나타났을 때의 경우이다.

(참고로 이 에러는 yarn start가 되지 않아서 yarn install을 하려고 할 때 발생하는 상황이다.)

yarn install v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
error jest-diff@27.1.0: The engine "node" is incompatible with this module. Expected version "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0". Got "12.6.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

 

이런 경우, node를 최신 버전으로 업데이트를 해야 하는 경우라고 볼 수 있다.

따라서, node 업데이트를 해야 하는데, 여기서 개발환경에 따라서 다른 방법이 요구된다.

 


 

1번 경우: mac을 활용하고 있다면, 다음과 같은 코드로 업데이트를 한 후 해결해보면 된다.

$ sudo npm cache clean -f # 강제캐시삭제
$ sudo npm install -g n # n 모듈 설치
$ sudo n stable # or sudo n 12.14.0 (버전명)
$ node -v # 버전 확인

사실 이 경우는 나는 사용하지 못했기 때문에 https://question0.tistory.com/40를 참조하는 것이 더 좋다고 생각된다.

 

[Node.js] 최신버전으로 업데이트 하기

Node 업데이트 $ sudo npm cache clean -f # 강제캐시삭제 $ sudo npm install -g n # n 모듈 설치 $ sudo n stable # or sudo n 12.14.0 (버전명) $ node -v # 버전 확인 Node 업데이트 오류 bash: /usr/bin/node..

question0.tistory.com

 


 

2번 경우: windows를 사용하고 있고, nvm으로 node를 다운로드하였을 경우

사실 이 경우를 정리하기 위해서 이 글을 쓰는 이유가 있다.

우선, nvm을 통해서 업데이트를 해야 하므로, 우선 version을 확인해보는 것이 좋다.

nvm --version 을 통해서 다음과 같이 version 뿐만 아니라 다양한 명령어들을 확인해본다.

nvm --version을 했을 경우


여기서 nvm install <version> [arch] 부분을 읽어보면, "latest"를 사용할 수 있다고 되어있다.

이에 따라서 nvm install latest를 사용하는 방법을 선택하면 된다.

이렇게 하면 이미 최신 업데이트가 되어있으면 다음 사진과 같이 나타날 것이고, 

그렇지 않다면 알아서 업데이트를 실행할 것이다.

최신 업데이트가 이미 되어있다는 뜻이다.


마지막으로, nvm use [version]의 명령어를 사용해서 사용하고자 하는 version으로 사용하도록 처리를 하면 된다.

nvm use 16.9.1 을 하면 된다.

 

이러고 나서 오류가 나던 yarn start를 다시 하면, 제대로 오류 없이 작동하는 것을 볼 수 있다!!!

리액트에서 yarn보다는 아직 초반 공부 중인지라, npm이 더 익숙해서 npm을 사용하면서 공부를 했다. 

그런데 yarn을 사용한 폴더를 열어봐야할 일이 있어서 yarn install을 통해서 설치를 했다.

 

 

해당 링크를 통해서 npm을 통한 yarn install이 가능하다: https://classic.yarnpkg.com/en/docs/install/#windows-stable

 

Yarn

Fast, reliable, and secure dependency management.

classic.yarnpkg.com

 

root-import라는 폴더를 통해서 설치를 한 후, 잘 실행을 했고, 해당 폴더를 삭제했다.

 


 

문제는 해당 폴더를 삭제 후, npm으로 돌리고 싶은데, 해당 폴더를 npx create-react-app root-import --template=typescript 로 생성을 하면, 계속 yarn.lock이 생기면서 yarn형태로 생겼다.

원하던 파일은 yarn.lock이 아니라 package-lock 이었는데, 그저 삭제로는 안 되는 거였다.

 

계속 고민을 하고 인터넷을 찾던 중에, yarn uninstall을 하라는 글을 찾았었다.

해당 stackoverflow의 링크에도 꽤 많은 사람들의 질문과 대답이 존재한다. 

일단 중요한 부분은 npm을 통해서 uninstall하는 방법은 npm uninstall -g yarn으로 하는 것이다.

https://stackoverflow.com/questions/42334978/how-do-i-uninstall-yarn

 

How Do I Uninstall Yarn

How can I uninstall yarn? I've used it for a react-native project and now whenever I move the code out of index.ios.js or index.android.js it throws an error so I'd like to just use npm but wheneve...

stackoverflow.com

원했던 package-lock이 있는 형태

 


 

위의 방법으로 yarn의 uninstall은 그런데 경로를 해당 폴더에서만이 아닌 아예 home directory 상태에서 처리를 해야 할 것 같다.

 

사실 uninstall을 했는데도 계속 몇 번 yarn이 생겼던 것 같은데, 어느 순간 yarn이 없어지고 다시 npm의 형태로 쓸 수 있는 package-lock이 나왔다.

그나마 내가 한 여러 방법들 중에 위의 방법이 먹혔기 때문에 이 방법은 정리한다.

 

 

+ Recent posts