Dapp 셋팅을 새로하려는데 아래와 같은 엄청나게 많은 문제들이 발생했다.
Module not found: Error: Can't resolve 'stream'
stream, crypto, assert, https, os, url
등등 뭐가 엄청나게 없단다.. ㅇㄴ..
WEB3 깃허브에 들어가보면 아래와 같은 내용을 찾을 수 있다.
대략 요약해보면, Nodejs Polyfill이 최신 CRA 버전에 포함되어있지 않다는 것이다. =_=..
그래서 간단하게 React Setting을 새로 시작한다.
리액트에 Web3 적용 셋팅 방법!
1. 우선 프로젝트 폴더에 들어가서 create-react-app 을 하자.
npx create-react-app client
2. web3 & web3-utils를 설치한다.
npm install web3 web3-utils
이제 App.js에서 import Web3 from "web3"를 한번해보자. 에러가 왕창 쏟아진다.
3. 없다는거 디팬던시 다 설치해주자.
#npm 명령어
npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
#yarn 명령어
yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer
4. client/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;
}
5. Package.json에서 rewired로 실행할 수 있도록 scripts 부분을 수정한다.
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
- 끝 -
'BlockChain Developer > Public Blockchain' 카테고리의 다른 글
Install IPFS IN Ubuntu (0) | 2022.04.19 |
---|---|
[Ethereum] GSN (0) | 2022.03.15 |
[Hyperledger Besu] EC2에 Hyperledger IBFT 2.0 (POA) Network 구성하기 (1) | 2021.12.15 |
[IPFS] Nodejs에서 사용하기 (2) | 2021.10.04 |
[Ethereum] Geth Dapp (with Node.js & React.js) 구축하기 (1) | 2021.09.25 |