node 14 to 16 version up (feat. node-sass, sass-loader)

이번 사내 젠킨스 서버의 nodejs 버전업을 하게 되면서 웹 프로젝트 배포 중 오류가 발생하였다.

• 기존 : node 14.xx
• 변경 : node 16.xx

Creating an optimized production build...
Failed to compile.

./src/css/style.scss
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1


Build step 'Execute shell' marked build as failure
Finished: FAILURE

// 대략 npm build 중에 node-sass 관련 실패

이 참에 배포 환경과 개발 환경을 맞추기 위해 개발 환경도 node 16으로 버전업 하여 빌드를 정상적으로 수행하도록 작업을 하게 되었다.

금요일 오후에 발견하게 되었는데 이런 것은 미뤄두면 자꾸 생각나서 퇴근 후 집에서 해결을 위한 작업 시작 ^^;;

Step1 : nodejs 14 to 16 버전업

nodejs 홈페이지에 가서 16버전에서 가장 높은 16.20.1 설치파일 다운로드 후 설치

Step2 : node-sass 버전업

변경 전 node-sass 버전은 4.x.x 이므로 npm에서 node-sass 를 검색 후 node 16에 맞는
버전 선택

관련 링크

Node 16버전은 6.0+ 이므로 6버전 이상으로 설치 후 npm start 실행

npm i --save node-sass@6

$npm start

Failed to compile.

./src/css/style.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-5-4!./src/css/style.scss)
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

응? 또 node-sass 버전업 이슈가...?
npm ls로 확인해보니 프로젝트에서 react-scripts@3.4.4 버전을 사용 중
react-scripts의 package.json 을 확인 -> sass-loader -> peerDependencies node-sass가 ^4.0.0 이여서 내부적으로 4버전대 node-sass를 사용하는 거였다.

peerDependencies {
	"node-sass": "^4.0.0"
}

Step3 : react-scripts 이슈

현재로서는 react-scripts를 걷어낼 수 없으므로 react-scripts를 버전업 하기로 함

추가) react-scripts 를 3버전에서 5버전대로 바로 올렸으나
mobx에서 필요한 addDecoratorsLegacy 오류가 발생하여 4버전대로 설치...

npm i --save react-scripts@4

Step4 : node-sass 버전업 이슈

node-sass 4.14.1 에서 6.0.1 으로 버전업을 하였더니 font url 경로를 못찾는 문제가 발생....
기존에는 public/fonts 경로의 폰트들을 불러왔으나 node-sass 6버전에서는 경로를 찾을 수 없다고 오류 발생

이를 해결하기 위한 2가지 방안 고려

1. public/fonts 디렉토리를 유지하고 src/css 에서 이전처럼 폰트 파일들을 불러올 수 있게
2. public/fonts 디렉토리를 src/fonts로 이동

당연히 1번 방법으로 하면 좋지만 방법을 현재까지도 못 찾고 있어 2번으로 임시작업...

추가 이슈

폰트 경로 이슈를 해결 후 npm start를 하였더니 프로젝트의 모든 eslint 경고 메시지가 한꺼번에 출력이 되었다... 아마도 이것도 버전업 관련 이슈 같은데 이제 다음 마일스톤 업무를 해야되서 시간을 내어 봐야할 것 같다. 추측으로는 config-overrides.js disableEsLint() 가 작동을 안하는 것 같다...

const { addDecoratorsLegacy, disableEsLint, override } = require('customize-cra');

module.exports = {
  webpack: override(disableEsLint(), addDecoratorsLegacy()),
};

빌드에는 문제는 없지만 매우 거슬려서 조만간 해결해야겠다.

마무리

기존 프로젝트의 npm 라이브러리 버전업 관리를 미뤘더니 개발환경 변경에 따른 작업량이 많았다.
그리고 사용중인 라이브러리들의 정확한 사용법을 아는 것도 중요한 것을 다시 한번 깨닿게 되었다.
같은 팀원분이 해당 이슈 때문에 젠킨스 nodejs 버전을 롤백 해야 되는지도 검토하였지만 하나의 프로젝트만 빌드하는 것이 아니기 때문에 장기적으로는 무조건 해당 프로젝트의 라이브러리를 버전업하여 빌드가 가능하도록 하는게 맞는 것 같았다.

아직 해결하지 못한 폰트 파일 경로 이슈와 추가 이슈는 좀 더 시간이 필요할 것 같다.