nextjs 로 build 하려고 하는데 window.klaytn 이 코드 build가 안되네요

한국어🇰🇷 Kaikas (아카이브)
#1

next.js + kaikas 로 앱을 만들어 보고 있습니다.

next build를 하려니
코드 중 카이카스를 호출하는

window.klaytn

이 부분에서 에러가 나면서 빌드가 되지 않네요~

# 에러
Type error: Property 'klaytn' does not exist on type 'Window & typeof globalThis'.

이부분 해결 해보신분 계신가요? ㅠㅠ

#2

안녕하세요

혹시 환경이 TypeScript를 사용하고 계신가요?

그렇다면 다음과같이 type definition을 추가해주셔야합니다.

interface Klaytn {
  on: (eventName: string, callback: () => void) => void;
  enable: () => Promise<Array<string>>;
  selectedAddress: string;
  networkVersion: number;
  publicConfigStore: Store;
}

interface State {
  isEnabled: boolean
  isUnlocked: boolean;
  networkVersion: number;
  onboardingcomplete: boolean;
}

interface Store {
  subscribe: (callback: () => void) => void;
  getState: () => State;
}

declare interface Window {
  klaytn?: Klaytn;
}
1 Like
#3

오~ 감사합니다. ^^

declare global {
    interface Window {
        klaytn: Klaytn;
    }
}

이 부분만 이렇게 global로 붙여서 사용했더니 다음으로 넘어가졌습니다… ^^
감사합니다~

그런데 다음 라인에서 또 문제가 ㅠㅠ ;;

const caver = new Caver(window.klaytn);

이렇게 caver를 사용하는 코드에서 에러가 발생 했네요 ㅠ;

# 에러
Type error: Argument of type 'Klaytn' is not assignable to parameter of type 'RequestProvider | undefined'.
  Type 'Klaytn' is missing the following properties from type 'IpcProvider': responseCallbacks, notificationCallbacks, path, connected, and 9 more.

혹시 이것도 해결 가능 할까요? ㅠ;

#4

Caver를 생성할때 받는 인자 타입에

Klaytn 인터페이스를 추가해주서야합니다

즉 d.ts파일을 만드시고

Caver type definition을 오버로딩 하셔야힙니다.

2 Likes
#5

아니면 간단한 방법으로

window 인터페이스 아래 klaytn타입을 klaytn: any 로 바꿔주셔도됩니다.

2 Likes