[Error] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core

여느 때와 마찬가지로 무난 무난하게 프로젝트 작업을 진행 중이었고 오류 수정을 위해 디버깅 작업을 진행 중이었다.
해당 프로젝트는 다른 팀원과 같이 협업 중인 프로젝트였으며, git pull & push 단계에서 발생하는 가벼운 git 충돌 외에 크리티컬 한 오류는 없었던 상황이었다.
 
오류를 발견하게 됐던 이 날도 작업 마무리 후 퇴근을 위해 디버깅 완료한 작업이력을 commit 하려 하는데, 정상적으로 commit 된 것과 동시에 제목에 언급된 에러 메시지가 ㄷㄷㄷㅈ 했다.
 
그래서 해결을 위해 찾아봤다.
 
먼저, 반환된 에러메시지 내용대로 구글링 해보았다. 여러 게시글들을 방문해 읽어보았고, 확인해 보던 중 stack overflow에서 관련글을 찾을 수 있었다.
 
stack overflow에 작성된 원문의 내용은 아래와 같았다.

There is another solution to provide node polyfills. Instead of modifying node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js and adding postinstall script to provide resolve.fallback, you can specify paths property in tsconfig.json, e.g.:

원문 링크: https://github.com/web3/web3.js/issues/4070
 
 
원만한 이해를 위해 Google 번역 확장 프로그램의 도움을 얻었다.

노드 polyfill을 제공하는 또 다른 솔루션이 있습니다. node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js를 수정하고 postinstall 스크립트를 추가하여 resolve.fallback을 제공하는 대신 tsconfig.json에서 경로 속성을 지정할 수 있습니다. 예:

 
핵심은 이랬다.

node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js를 수정하고 postinstall 스크립트를 추가하여 resolve.fallback을 제공.

하는 방법도 있지만, ( 요 방법으로 해결 ❌ )
 
필자는 Angular, Ionic 프레임워크를 사용중이기도 하고, Typescript를 사용중이어서

tsconfig.json에서 경로 속성을 지정

하는 방법을 택하기로 했다. ( 요 방법으로 해결 ✔ )
 
 
상세한 해결방법은 다음과 같았다.
 
1. crypto-browserify 및 관련 패키지 설치:
이 문제를 해결하기 위해 crypto-browserify, stream-browserify, assert, stream-http, https-browserify, os-browserify 패키지를 설치해야 하고, 프로젝트 디렉토리 터미널에서 다음 명령어를 실행하여 패키지를 설치한다.

npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify

 
2. tsconfig.json 수정:
프로젝트의 tsconfig.json 파일을 열고 다음 내용을 추가한다:

{
  "compilerOptions": {
    "paths": {
      "crypto": ["./node_modules/crypto-browserify"],
      "stream": ["./node_modules/stream-browserify"],
      "assert": ["./node_modules/assert"],
      "http": ["./node_modules/stream-http"],
      "https": ["./node_modules/https-browserify"],
      "os": ["./node_modules/os-browserify"]
    }
  }
}

 
3. ( Angular 프레임워크를 사용중인 경우) angular.json 수정: 프로젝트의 angular.json 파일을 열고 다음 내용을 추가한다.
( 빌드 시간 경고 없이 CommonJS 패키지 암호화를 사용해야 한다는 아래 줄을 추가한다. )

"allowedCommonJsDependencies": ["crypto"]

 

{
  "architect": {
    "build": {
      "options": {
        "allowedCommonJsDependencies": ["crypto"]
      }
    }
  }
}

 
이렇게 하면 발생하던 에러가 해결된다.
 
해결방법 3번째 단계의 경우 필수가 아닐 수 있다.
문제 해결 당시 crypto 라이브러리를 사용중이었고,
에러가 발생한 원인 또한 crypto 라이브러리 설치 이후 사용하려고 할 때 발생했기 때문에
angular.json에 추가 설정을 해준 것이다.
 
각자 개발 환경과 상황이 다를 수 있기 때문에 필요에 따라 참고하면 좋을 거 같다.
 
 
 
 
구글링을 통해 문제를 해결한 이후,
문득 "그래서 발생한 이유가 뭐지?" "원인이 뭐지?" 라는 생각이 들었다.
그래서 또 찾아봤다.
 
이번엔 구글링이 아닌 똑똑하디 똑똑한 ChatGPT에게 물어봤다.
물어보자마자 신난듯이 발생한 원인과 해결방안을 제시했다.
 
 
 
야심차게 이어서 작성해보려고 ChatGPT 이전 기록 확인하려고 쭉~ 내려가던 중..
ChatGPT openai 사이트 오류로 인해 응답 받았던 내용 확인이 어려워 차후 to be continue.. ㅠ
 

---