1
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

enter image description here

*Using:Next.js

2
  • This issue is related to the use of NextJS, see this issue in the library GitHub: github.com/polkadot-js/extension/issues/1050
    – Alex Bean
    Oct 21, 2022 at 13:18
  • @AlexBean Thank you for your reply. I have looked at the issue, but it seems that nothing has been resolved. What should I do?
    – Steve
    Oct 21, 2022 at 14:36

1 Answer 1

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 });
2
  • 1
    Thanks your advice! TypeError: web3Enable is not a function new error was happened if I did as you mentioned but I finally did it because I wrote them in async function like bellow const { web3Enable,web3Accounts, web3FromSource } = await import("@polkadot/extension-dapp");
    – Steve
    Oct 25, 2022 at 9:51
  • Really? That code worked for me. But glad you finally fix it
    – Alex Bean
    Oct 25, 2022 at 9:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.