[TIL] webpack build에서의 node-sass, sass-loader 호환성 문제

토이프로젝트를 Heroku로 빌드하는 과정에서 react client 쪽에서 에러가 발생했다. 에러 메시지를 보니 sass-loader 패키지에서 요구하는 node-sass의 버전과 package.json에 적힌 버전과 맞지 않아 발생한 것으로 보였다.

sass-loader의 버전은 ^8.0.0인데 요구하는 node-sass의 버전은 ^4.0.0대였다.

(node-modules에서 sass-loader가 설치된 경로의 package.json에 보면 peerDependencies 항목에서 호환되는 node-sass 버전을 알 수 있다)
하지만 package.json의 명시된 node-sass의 버전은 ^6.0.0이었다. node-sass의 버전을 낮추려고 했지만 실패. node 16에서는 node-sass ^6.0.0의 하위 버전이 설치가 되지 않고 에러를 배출해 낸다.

따라서 ^6.0.0의 node-sass와 호환되는 sass-loader 최신 버전을 설치했다. 그 결과 ^13.0.2 버전이 설치됐다. 설치하는 과정에서 4 버전의 webpack을 지원하지 않는다는 사실을 알고 webpack도 5 버전으로 이제서야 업데이트했다. (+html-webpack-plugin도 ^4.4.0에서 ^5.5.0로 올렸다😳)

다행히 이제서야 빌드가 된다.

출처

• https://buyandpray.tistory.com/80
• https://juntcom.tistory.com/167
• https://github.com/webpack/webpack/issues/12687