vscode에서 Node.JS 로 node-sass 사용시에 에러 해결

리액트 프로젝트 소스파일로 .scss 파일을 사용하기 위해서는 node-sass 라이브러리를 설치해야한다.

그런데 이게 Node.JS 버전에 맞게 설치해줘야 에러가 나지 않는거 같다.

참고로 에러가 잘 나는 라이브러리라고 하니 Node.JS 업데이트 할 때도 신경써야 할 거 같다.

 

내가 리액트로 프로젝트를 하면서 버전 때문에 사소한 오류들로 시간을 꽤나 잡아먹었다.. ㅜ

node-sass 라이브러리 설치 오류를 포함해서 겪은 오류들이 여러 가지 있었다.

 

1. 버전을 너무 최신 버전으로 사용하면 호환이 되지 않을수 있다.

우선 (현재 시점 기준으로) Node.JS 버전이 17이 가장 최신 버전인데, 리액트 프로젝트를 할 때 17버전은 사용하지 않는 것이 좋다. 호환되지 않거나 자잘한 오류들이 많아서 16버전을 사용하는 것이 좋다. 

 

2. 그렇다고 조금 이전 버전을 사용해도 오류가 뜬다..

Node.JS 14 버전을 사용해서 'npx create-react-app 폴더명' 을 입력했을때 에러가 낫다. 버전이 낮기 때문에 에러가 뜨는거 같다. 그래서 Node.JS를 16버전으로 설치해서 다시 해보니 해결됐다.

 

3. scss 파일을 사용하기 위해 node-sass 라이브러리 설치시에 Node.JS 버전이 문제일 수도 있다.

이건 다양한 해결 방법이 있는 듯 한데, 내가 아는 것은 Node.JS 16버전 사용시에는 npm install node-sass로 설치하고 node_modules 폴더와 package-lock.json을 삭제하고 npm install로 다시 설치해주면 해결된다고 한다.

나는 Node.JS 14 버전에서 node_modules 폴더와 package-lock.json을 삭제하고 npm install로 재설치 후에 npm install node-sass@4.14.1 로 설치하니 해결되었다. 이 때 설치전부터 서버를 실행되어있는채로 했으면 오류가 계속 지속되는거 같으니 다시 서버를 재실행하면 정상적으로 된다.

-> 오류를 해결하면서 느낀 것이 하라는대로 했는데 안 되면 버전을 바꿔서 해보거나 서버를 재실행해보면 되는거 같다. 그리고 node_modules와 package.json 삭제후 npm install로 재설치를 하는 방법도 효과가 있는 방법인거 같다.

 

참고했던 방법 중

https://japing.tistory.com/entry/React-Module-not-found-Cant-resolve-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%AA%85

[React] Module not found: Can't resolve '라이브러리명'