[오류해결] Web3 설치 시, React 에러 해결

인터넷의 이더리움 앱 개발 예제를 따라할 때, 버전 문제로 front-end 개발 시 에러가 발생하는 경우가 종종 있다.

 

Web3를 설치하고 나서, React frontend가 아래와 같은 에러가 발생할 수 있다.

 

Compiled with problems:X

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in '/home/basti/Desktop/activate/kolor-ui/node_modules/cipher-base'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }


ERROR in ./node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in '/home/basti/Desktop/activate/kolor-ui/node_modules/eth-lib/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }


ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

........

 

create-react-app의 버전이 5가 넘으면, 최신 ECMAscript 환경을 만들어주는 polyfill을 포함하고 있지 않아서 생기는 문제다. 두가지 해결책이 있는데 creat-react-app의 낮은 버전을 설치하거나, react-app-rewired를 설치하고 여러 조건들을 맞추는 방법이 있는 듯하다. 어차피 예제 수준 돌려볼 것이므로, 간단히 create-react-app의 낮은 버전을 설치하여 해결하였다 (두번째 방법은 뭘 잘 못했는지 과거 버전 지원해 주게 해주는 babel 관련 에러가 떴다).

 

1) 낮은 create-react-app 설치

 

// 아래 명령으로 패키지 설치

> npm install create-react-app@4.0.3

> npm install fs assert https-browserify os os-browserify stream-browserify stream-http 

// 아래 내용이 작성된 config-overrides.js 를 project root에 추가

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

    return config;
}

 

2) react-app-rewired 설치 후 추가 설정

 

// react-app-rewired 및 추가 package 설치

> 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에서 실행 script를 react-app-rewired로 변경
// before
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

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