[Webpack] webpack < 5 used to include polyfills...

Introduction

절대 경로 적용 및 Web3 Wallet 개발 과정에서 기존의 CRA 환경에서는 Compile이 되지 않는 문제가 발생하여 프로젝트를 Eject하면서 아래와 같은 에러를 마주치게 되었습니다.

Cause

위의 문제는 Webpack 5가 Nodejs의 핵심 모듈을 자동으로 Polyfill하지 않아서 발생하게 됩니다.

브라우저 등에서 실행되는 코드의 경우 npm에서 호환되는 모듈을 설치하고 직접 포함해야합니다.

아래는 Webpack 5 이전에 Polyfill하는 라이브러리 목록입니다.

assert: require.resolve('assert'),
buffer: require.resolve('buffer'),
console: require.resolve('console-browserify'),
constants: require.resolve('constants-browserify'),
crypto: require.resolve('crypto-browserify'),
domain: require.resolve('domain-browser'),
events: require.resolve('events'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
path: require.resolve('path-browserify'),
punycode: require.resolve('punycode'),
process: require.resolve('process/browser'),
querystring: require.resolve('querystring-es3'),
stream: require.resolve('stream-browserify'),
string_decoder: require.resolve('string_decoder'),
sys: require.resolve('util'),
timers: require.resolve('timers-browserify'),
tty: require.resolve('tty-browserify'),
url: require.resolve('url'),
util: require.resolve('util'),
vm: require.resolve('vm-browserify'),
zlib: require.resolve('browserify-zlib'),

Web3 Wallet 개발하면서 Web3js, ethereumjs-wallet 등의 라이브러리를 사용하면 해당 이슈를 마주하게 됩니다.

Solution

해결책은 간단합니다.

resolve: {
    fallback: {
        assert: require.resolve("assert"),
        os: require.resolve("os-browserify/browser"),
        buffer: require.resolve("buffer"),
        https: require.resolve("https-browserify"),
        http: require.resolve("stream-http"),
        crypto: require.resolve("crypto-browserify"),
        stream: require.resolve("stream-browserify"),
     },
  },
  ...etc,
}

Webpack.config.js의 resolve.fallback에 아래와 같이 polyfill 할 라이브러리를 정의하고 npm install 합니다.