클레이튼 caver-js 지갑 연결하기 webpack error

Kaikas 연결을 위해 caver-js 설치후 파일을 실행하니 아래와 같은 에러가 발생했다.

 

can't resolve 'fs' in '/users/eunjaeyoon/desktop/project4/beb-cc3-project-04/client/node_modules/caver-js/packages/caver-ipfs/src'

 

이는 webpack 5 이상 버전부터 caver-js에서 호환성 에러가 있어 발생하는 에러라고 한다. 나는 다음과 같이 방법으로 이슈를 해결했다.

rm package-lock.json
rm -r node_modules
npm install webpack@4.44.2

위와 같은 방법으로 webpack@4.44.2 를 설치 후, webpack.config.js 파일에 아래와 같이 코드를 추가해주어야 한다.

(경로: node_modules > react-scripts > config > webpack.config.js)

fallback: {
        fs: false,
      },

 

🚀 최종 지갑 연결 코드

if (typeof window.klaytn === 'undefined') {
      metamaskInstallNoti();
      return;
    }
    const accounts = await window.klaytn.enable();
    const account = window.klaytn.selectedAddress;

    const caver = new Caver(window.klaytn);
    const balance = await caver.klay.getBalance(account);