Issue

오랜만에 프로젝트 잘 있나 한 번 실행해보려고 노트북에 node를 설치했다.
분명 안전한 릴리스가 14버전이었던 것 같은데 벌써 16버전이 됐다.
멍청한 나는 그걸 몰랐고 용감하게 npm install때렸다.

// 결과
...
대략 엄청난 에러. 😎
ERR! code 1
node-sass, sass-loader 오류 났음.

sass, scss를 사용해야하는 것도 있지만.. 오류나서 프로젝트를 실행할 수 없다.
(일단 nodeJs를 14버전으로 낮추는 방법이 있겠지만 안 됐다. 이유는 기억 상실이라 못 적겠다.)

Researching...

💀 뭐 거창하게 적었지만.. 계속 구글링...

버전 호환 nodeJs, node-sass

일단, NodeJs 버전과 호환이 되는 node-sass 버전을 이용해야 한다.

NodeJS	Supported node-sass version	Node Module
Node 17	7.0+	102
Node 16	6.0+	93
Node 15	5.0+, <7.0	88
Node 14	4.14+	83
Node13	4.13+, <5.0	79
Node 12	4.12+	72
Node 11	4.10+, <5.0	67
Node 10	4.9+, <6.0	64
Node 8	4.5.3+, <5.0	57
Node <8	<5.0	<57

출처 : https://www.npmjs.com/package/node-sass

나으 Node 버전은 16번대, node-sass의 버전을 먼저 살펴보자면

// 특정 패키지의 버전 정보를 확인한다.
npm view node-sass versions

// 찾은 후에 맞는 버전으로 설치한다.
npm install node-sass@6.0.0

버전 호환 node-sass, sass-loader

염ㅂ하고 이번엔 sass-loader가 빽 거린다. 😆

npm7 이전에는 peer dependency 관련 오류가 있으면 경고만 하고 설치는 됐었다고 한다.
이후 부터는 에러가 발생하면서 설치가 되지 않는다.

// 의존성 오류 
Could not resolve dependency:
peerOptional node-sass@"^4.0.0" from sass-loader@8.0.2

// 와 함께 두가지 방법을 제안한다.
// 강제로 설치, 또는 의존성 무시하고 설치 위 명령어 뒤에 붙여주면 된다.
this command with --force, or --legacy-peer-deps

peerDependencies

당연히 무시하고 설치했지만 역시나 오류.
현재 node-sass의 버전은 8.0.2
package-lock.json 파일에서 node-sass의 peerDependencies를 보니
"node-sass": "^4.0.0" 이렇게 명시되어 있다.

고로 어떤 건 >= 또 어떤 건 ^ 다양하게 적혀있어서 또 찾아봤다.

---

version - 명시된 버전과 일치해야 한다.
>version, >=version, <version, <=version - 부등호에 맞게 이해하면 된다.
~version - 명시된 버전과 근사한 버전
^version - 명시한 버전과 호환되는 것
1.2.x - 1.2.0, 1.2.1, 1.2.2 ...
* - 모든 버전
"" - *과 같다.
.
.
이상 더 궁금한 건 나중에 찾아볼란다.

---

// nodeJs와 호환되게 node-sass를 업데이트 했더니 sass-loader랑 싸운다.
Node Sass version 6.0.0 is incompatible with ^4.0.0.

버전 호환 node-sass, sass-loader 2

그럼 이제 sass-loader의 호환 정보를 알아보자.
해결방법에는 두 가지 방법이 있다고 한다.
node-sass 버전을 낮추거나, sass-loader 버전을 올리는 것.

전자는 nodeJs 버전과 맞춘 거니까 후자로 선택한다.

// 일단 말끔하게 청소하고
npm uninstall sass-loader

// 최신이 좋은겨 최신으로 간다.
npm install sass-loader@latest

버전 호환 sass-loader, webpack

이번엔 webpack이다.
이쯤되면 그냥 nodeJs 16 설치 기념 프로젝트를 새로 만들 걸 그랬다.

// 걍 웹팩도 최신으로 간다.
npm uninstall webpack
npm install webpack@latest

// webpack 업데이트한 뒤에 아까 오류났던 sass-loader 최신
npm install sass-loader@latest

최신 설치한 현재 기준 sass-loader 12.6.0으로 업데이트 됐고
peerDependencies - "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"

버전 호환 webpack, vueJs

이번엔 webpack이랑 vue ㅋㅋㅋㅋㅋㅋ
프로젝트 새로 만들지 그러냐 🤬🤬🤬

찾아보니까 webpack@4.x로 다운그레이드하면 된단다.
그럼 sass-loader를 중간으로 맞춰보자 다 호환되게

up&down 게임하는 기분으로 10~11버전 대충 때리다보니까 찾았다.
sass-loader의 peerDependencies - "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0"

webpack 다운그레이드

그래도 여기까지 왔으니까 좀 더 해보자.
자, 이제 webpack@4.x로 다운그레이드한 뒤에 npm run serve

🤟 야생의 Vue2.6대에서 sass-loader 11대를 사용하면 만나(은)는 에러가 나타났다.

sass-loader를 다운그레이드 하되 node-sass와 호환되는 버전으로 맞춘다.

마지막 에러

자고 싶다.

Error: Cannot find module 'cache-loader'

package-lock.json을 삭제하고 프로젝트를 실행시키면 된다는 단비 같은 포스팅을 믿고..
package-lock.json 따위 내게 중요하지 않아. 적어도 지금은..

지우고 시도해 본다!
..
너랑 안 놀아.

마지막 에러 2

모듈이 없다잖아. 설치한다.
npm install cache-loader -D

되었다.

깨알 정보!

1. 일반 npm install {moduleName} 방법, -P라는 옵션을 부과한 것과 같다.
   package.json에서 dependencies에 기록된다.

npm install {moduleName}

2. npm install {moduleName} --save-dev
   package.json에서 dev-dependencies에 기록된다.
   개발할 때만 필요한 module들을 다운로드 할때 사용한다.

// -D == --save-dev
npm install {moduleName} -D

3. npm install {moduleName} -O
   package.json에 optionalDependencies에 기록된다.
   어떤 상황에서만 사용되는 module을 다운로드 할 때 사용한다.

4. --no-save 기록 하지 않게 다운로드 할 때 사용한다.)

Conclusion

일단 나Bird끼.. 아직도 이런 문제에 대해서 구체적이지 않고 막연하게 접근하려는 경향이 있다.
무작정 찡찡대면 해결되기를 바라는 마인드는 버리는 게 답이다.

오류를 만났을 때 알아보지 못하는 경우더라도 키가되는 하나의 단어라도 찾을 수 있도록 하자.
구글링하면 웬만하면 나온다.
뇌용량도 적은데 자꾸 외우려 하지 말고 기록하자.

알아 먹기 좋은 에러가 깔끔한 문장으로 떴을 땐 감사합니다.

아무튼, 여튼 째뜬.

• nodeJs 버전이 올라가면서 이전 버전에서 생성했던 프로젝트 패키지의 모듈들 버전과 호환되지 않게 되었다.
• 하나둘 버전을 맞추다보니 산으로 갈 뻔 했지만 이윽고 퍼즐을 맞추게 되었다.
• npm 사이트에서 친절하게 의존성을 가지는 모듈과 호환되는 버전을 테이블로 나타낸 모듈도 있지만 아닌 모듈도 있다.