리액트 5.0 이상 버전 사용시 "webpack < 5 used" 에러 조치 방법

리액트 5.0 이상 버전 사용 시 특정 npm 모듈에서 "BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default " 에러가 발생했습니다. 제 경우는 GIFEncoder 모듈에서 webpack 에러가 발생했는데요. 가장 간단한 조치 방법을 알려드리겠습니다.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default&nbsp; 에러 발생 화면

모듈의 버전을 바꿔서 webpack 에러 조치하는 방법

리액트 버전이 올라감에 따라 해당 노드 모듈도 신버전이 나왔을 수 있습니다.

이런 경우 해당 노드 모듈의 버전을 webpack 5 이상이 적용된 새로운 버전으로 업그레이드해주면 에러가 발생하지 않겠죠.

하지만 GIFEncoder.js를 포함해 대부분의 노드 모듈이 webpack 5 이상에 대한 대응이 안되고 있는 걸로 알고 있습니다.

리액트 스크립트 버전을 낮춰서 webpack 에러 조치하는 방법

제 경우는 GIF Encoder 대체제를 마땅히 찾기가 힘들어 리액트 스크립트의 버전을 5.x.x가 아닌 4.0.3으로 낮춰서 webpack 에러를 조치했습니다.

간단히 말해 리액트 스크립트 버전을 다운그레이드 해주는 거죠.

 

방법은 간단합니다. 일단 하단의 명령어로 react-scripts를 삭제합니다.

(가능하면 package.json 파일은 닫고 작업합시다.)

npm uninstall react-scripts

그리고 다시 하단의 명령어로 최신 버전이 아닌 react script 4.0.3 버전을 강제로 설치해 줍니다.

npm install react-scripts@4.0.3

그리고 package.json 파일을 확인해 보면 리액트 스크립트 버전이 4.0.3으로 바뀐 것을 확인할 수 있습니다.

ERR_OSSL_EVP_UNSUPPORTED 에러 해결 방법

다시 npm start 해보면 "ERR_OSSL_EVP_UNSUPPORTED" 에러가 발생하네요.

이 에러의 발생 원인은 리액트 18을 사용할 때 리액트 스크립트 4 버전을 이용하면 open ssl 보안 문제에 걸리기 때문이라고 합니다.

 

참고로 여기서 "npm audit fix --force" 명령어를 사용하면 다시 5.0.1 버전으로 올라가고 또 webpack 컴파일 에러가 날 테니 하면 안 될 것 같습니다.

 

그렇기 때문에 package.json 파일을 약간 손대줍니다.

스크립트 부분을 보면 하단과 같이 작성되어 있죠.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  },

깃허브 페이지 디플로이가 있는 분들도 있을 텐데 관계없습니다.

start와 build를 약간 수정해 줍니다.

  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  },

이렇게 start와 build 부분에 "--openssl-legacy-provider"를 추가해 주면 npm start를 할 때 정상 빌드가 가능합니다.

리액트 공식에서 참고한 내용인데 대충 문맥상 빌드나 시작할 때 레거시 버전의 openssl 제공자를 사용하게끔 우회시켜서 해당 에러가 발생하지 않도록 하는 방법인 것 같습니다.

되게 뭐가 까다로운 게 많네요.