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

한국어🇰🇷 Caver
1

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,
      https: false,
      stream: false,
    };

    return config;
  },
};

2. Window is not defined

new Caver(window.klaytn)를 Server side에서 시도할경우

아래와 같은 방법으로 해결할 수 있습니다.

if (typeof window !== "undefined") {
  // Client side only
}

useEffect(() => {
  // Client side only
})

@himmana

4개의 좋아요