[web3.js] react - web3 연결시 Polyfill Error

ERROR >

react에서 web3.js를 이용해 smartContract 연결 작업 도중, 다음과 같은 에러를 만났다.

ERROR in ./node_modules/cipher-base/index.js 3:16-43
Module not found: Error: Can't resolve 'stream' in 
'C:\Users\[경로]\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.​

 

이 문제는 nodeJS의 polyfill ( 간단히 생각하면 최신버전 개발-> 이전 버전에서 작동하게 해주는 도구)은 CRA의 최신 버전을 포함하고 있지 않기 때문이다.

그래서 CRA(create-react-app) 버전 5이상으로 만든 프로젝트에서 web3 를 이용해 빌드하면 실행이 안되는 것이었다.

 

 

 

 

SOLUTION >

1. react-app-rewired 및 필요한 모듈 설치 

 

1-1) yarn 이용시

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

 

1-2) npm 이용시

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

 

 

2. 프로젝트의 루트폴더에 config-overrides.js 파일 생성

 

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;
}

 

 

3. 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"
},

 

 

끝

 

이제 기능을 쓸 수 있을것이다

 

+ 추가로

만약 콘솔에 warning 표시 뜨는거 안보이게 하고싶다면

 

config-overrides.js 파일에 추가 

 

config-overrides.js > function override >

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

 

 

 

자세한 내용은 다음을 참조 :

 

https://github.com/ChainSafe/web3.js/blob/1.x/README.md

GitHub - ChainSafe/web3.js: Ethereum JavaScript API