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

Question

ReferenceError: window is not defined

I reload my browser, I get the error shown in the attached image.

However, once I disable bellow imports, the screen works fine.

And also error message say that bellow code is related. node_modules/@polkadot/extension-dapp/bundle.js:10:13

@polkadot/extension-dapp

@polkadot/identicon

If anyone has a kind mind, please see repo.

https://github.com/Interoperable-swap/frontend/issues/2

*Using:Next.js

Answer 1

The issue is about how Next.js renders the frontend code. From their docs:

Next.js is universal, which means it executes code first server-side, then client-side. The window object is only present client-side.

In order to get around that problem you will need to use a dynamic import as opposed to the normal import you currently have: https://nextjs.org/docs/advanced-features/dynamic-import

In your code it will be something like this. In client/context/TransactionContext.js change the import of the library from:

import { web3Accounts,web3Enable  } from '@polkadot/extension-dapp'

To:

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

And in the file client/components/Header.js change the import:

import Identicon from '@polkadot/react-identicon'

To:

import dynamic from 'next/dynamic'
const Identicon = dynamic(() => import('@polkadot/react-identicon'), { ssr: false });