error - ReferenceError: window is not defined polkadot react の対象方法

next.jsで@polkadot/extension-dappを使っていて下記のようなエラーが出た場合の対象方法を紹介します。

error - ReferenceError: window is not defined polkadot react

これは、@polkadot/extension-dappでは、windowを使いますそのため、 server side renderingでは使えません。next.jsではserver side renderingがされてしまいそのため上記のようなエラーが出てしまいます。

そのため、下記のようにdynamic import を使用するか

import dynamic from 'next/dynamic'
const web3Accounts = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });
const web3Enable = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });

下記のようにasyncの関数内で、importして使うことでwindowによるエラーを免れることができます。

const func = async () => {
const { web3Accounts } = await import('@polkadot/extension-dapp')
}

参考: 'window is not defined' issue when I integrate polkadot{js} extension into my dapp

参考: Undefined error in next js #1050

参考: extension-dapp/src/bundle.ts