webpack 5에서 node core 모듈을 polyfill하는 방법

이 튜토리얼에서는 react-app-rewired 패키지를 사용하여 webpack 버전 5 이상에서 node core 모듈을 폴리필하는 방법을, 필요한 의존성을 설치하고 기본 webpack 설정을 오버라이드하는 과정과 함께 배웁니다.

polyfill node core module 오류는 왜 발생하는가?

webpack 버전 ___의 최신 업데이트 이전까지는, webpack < 5에서 기본적으로 NodeJS 폴리필을 포함하고 있었습니다. 현재 버전의 webpack은 더 이상 기본적으로 NodeJS 폴리필을 포함하지 않기 때문에, create-react-app과 webpack > 5를 사용하여 web3.js 및 alchemyweb3.js library로 애플리케이션을 빌드하는 개발자들에게 문제가 발생합니다.

polyfill node core module 오류는 다음과 같은 모습입니다:

webpack 5에서 polyfill node core modules 오류를 해결하는 4가지 단계

create-react-app과 polyfill 오류의 주된 문제는, create-react-app이 기본적으로 webpack 설정 파일을 node-modules 안에 숨기고, 빌드 시점에 해당 파일을 생성하기 때문에 개발자가 이를 수정할 수 없다는 점입니다.

다행히 react-app-rewired라는 패키지가 있어서, 개발자가 webpack 설정 파일을 쉽게 수정하여 polyfill node core module 오류를 해결할 수 있습니다.

1. react-app-rewired 설치

먼저, 선호하는 패키지 매니저로 react-app-rewired 패키지를 설치합니다.

yarn으로 react-app-rewired 패키지 설치:

npm으로 react-app-rewired 패키지 설치:

2. 누락된 의존성 설치

다음으로, 아래의 누락된 의존성들을 설치합니다:

• crypto-browserify
• stream-browserify
• assert
• stream-http
• https-browserify
• os-browserify
• url

yarn으로 누락된 의존성 설치:

yarn add process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

npm으로 누락된 의존성 설치:

3. create-react-app의 webpack 설정 파일 오버라이드

프로젝트의 루트 폴더에 config-overrides.js라는 새 파일을 만들고, 다음 코드를 추가합니다:

이 config-overrides.js 코드 스니펫은 브라우저에서 web3 라이브러리와 지갑 프로바이더를 지원하는 데 필요한 누락된 의존성들을 webpack이 어떻게 resolve할지 알려주는 것입니다.

4. webpack 설정을 포함하도록 package.json 오버라이드

package.json 파일에서, 다음 세 개의 scripts 필드에 대해 react-scripts를 react-app-rewired 스크립트로 교체하여 webpack 설정을 업데이트합니다:

• start
• build
• test

react-scripts를 교체하기 전의 package.json 파일은 다음과 같습니다:

react-scripts를 react-app-rewired 스크립트로 교체한 후의 package.json 파일은 다음과 같습니다:

이것으로 끝입니다!

이제 polyfill node core module 오류가 해결되고, 누락되었던 NodeJS 폴리필이 앱에 포함되며, 앱이 web3.js 및 Alchemyweb3.js library와 함께 정상적으로 동작할 것입니다.