시작하며

얼마 전 CRA를 이용하여 Web3 프로젝트를 시작하다가 Module not found: Error: Can't resolve 'stream'라는 오류가 발생했습니다.

그래서 찾아보니 아래와 같은 이슈가 있었습니다.

https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues

최신 버전의 create-react-app(create-react-app 버전 >=5)에는 NodeJS polyfills이 포함되어 있지 않기 때문입니다.

해결

react-app-rewired 및 누락된 모듈을 설치하면 해결됩니다.

yarn을 이용하는 경우 :

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

npm을 이용하는 경우 :

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

프로젝트 루트 폴더에 config-overrides.js 파일을 생성합니다.

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

package.json의 스크립트를 수정합니다. react-scripts를 react-app-rewired으로 교체합니다.

수정 전 :

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

수정 후 :

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

이렇게 하면 누락된 polyfills이 포함되며, web3 모듈을 사용할 수 있게 되었습니다.

콘솔창에서 경고 숨기기

config-overrides.js에 아래 내용을 추가합니다.

config.ignoreWarnings = [/Failed to parse source map/];