Caver-js / kaikas 연동 관련

[samsonites]

안녕하세요?
nextjs 기반 react 환경에서 caver-js 및 kaikas를 연동하여 간단한 스마트컨트랙트를 호출하는 앱을 개발 중에 있습니다.

caver-js 1.6.X 버전을 사용하려고 헀으나, 현재 아래와 같이 ‘fs’ 모듈을 못찾아서 page를 로드할 시 아래와 같은 에러가 발생합니다.

Could not find files for /connect in .next/build-manifest.json
wait  - compiling /_error (client and server)...
error - ./node_modules/caver-js/packages/caver-ipfs/src/index.js:21:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/caver-js/index.js

caver-js 에서 내부 ipfs 에서 fs를 import하는 것 같아 rendering 하면서 발생하는 에러로 인지되는데…
혹시 1.6 버전 기반을 kaikas와 같이 사용하려면 어떻게 해야할까요?

---

임시적으로 버전을 낮춰서 (1.3.2) 일단 개발 중인데 이쪽에서는 다른 에러가 발생합니다… ㅠㅜ

kaikas로 스마트 거래에 대항 서명을 하려고 하는데 .send() 를 호출하면 아래와 같이 unknown account 에러가 뜹니다… ㅠ. 혹시 kaikas 로 smart contract 거래 호출에 대한 가이드를 공유 받을 수 있을까요?

// 타 파일에서 contract instance 정의

const TestContract =
  DEPLOYED_ABI &&
  DEPLOYED_ADDRESS &&
  new caver.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS);

 //
  const executeSmartContact = await TestContract.methods
    .test(value)
    .send({
      from: addr[0],
      gas: '20000000',
    });

[margintop3498]

안녕하세요

일단 caver는 최신버전을 사용부탁드립니다.

“caver-js 1.6.X 버전을 사용하려고 헀으나, 현재 아래와 같이 ‘fs’ 모듈을 못찾아서 page를 로드할 시 아래와 같은 에러가 발생합니다.” 부분은 아래 포럼에 내용으로 해결하시면 될것같습니다.

Next.js에서 caver-js를 사용하는 방법

https://forum.klaytn.foundation/t/next-js-caver-js/3665/2 최근에 올려주신 질문중에 해당 질문이 있었는데 삭제되어서 답변을 달지못하였습니다. 해당 이슈는 앞으로도 계속 등장할것으로 보여 아카이빙 목적으로 내용을 남깁니다. 1. Module not found Module not found: Can't resolve 'crypto' Module not found: Can't resolve 'fs' ... 다음과같은 오류가 나왔을때 아래의 config파일을 작성해주시고 다시 실행시켜주시면 caver-js가 정상적으로 임포트가 됩니다. next.config.js module.exports = { webpack5: true, webpack: (config) => { config.resolve.fallback = { crypto: false, fs: false, http: false, …

---

그리고 다음 이슈는 아래와 같이 해결하시면 될것같습니다.

먼저 kaikas네트워크와 contract를 배포한 네트워크가 동일한지 확인 해주세요.

그리고 아래 포럼글을 확인하셔서 다시 시도해보시겠습니까?

Kaikas와 연동해서 smartcontract의 함수를 실행하려고 합니다

caver 클래스를 어떻게 생성하신지 모르겠습니다만 아래와 같은 방법으로 컨트랙트 함수를 실행할 수 있습니다. const CONTRACT_ADDRESS = '0x0'; const [address] = await window.klaytn.enable(); const caver = new Caver(window.klaytn); const contract = caver.contract.create(abi, CONTRACT_ADDRESS); caver.klay.sendTransaction({ type: 'SMART_CONTRACT_EXECUTION', from: address, to: CONTRACT_ADDRESS, data: contract.methods.mint(params).encodeABI(), value: '1000000000000000000', gas: '800000', }) .on('transactionHash', (hash) => { }) …

[samsonites]

일단 config 설정 후, 다시 한 번 시도해보겠습니다!

---

Kaikas와 연동해서 smartcontract의 함수를 실행하려고 합니다

caver 클래스를 어떻게 생성하신지 모르겠습니다만 아래와 같은 방법으로 컨트랙트 함수를 실행할 수 있습니다. const CONTRACT_ADDRESS = '0x0'; const [address] = await window.klaytn.enable(); const caver = new Caver(window.klaytn); const contract = caver.contract.create(abi, CONTRACT_ADDRESS); caver.klay.sendTransaction({ type: 'SMART_CONTRACT_EXECUTION', from: address, to: CONTRACT_ADDRESS, data: contract.methods.mint(params).encodeABI(), value: '1000000000000000000', gas: '800000', }) .on('transactionHash', (hash) => { }) …

네, 위 방법으로는 잘 동작합니다.

[samsonites]

@margintop3498 config 쪽에 webpack 관련된 설정한 후 필요한 package를 npm install 로 설치하니까 정상동작합니다. 가이드 감사드립니다.