web3Provider in next js

Question

I try to use Web3-react v6 in Next JS and a got an error when try to wrapper mi entery app with the provider,

In _app.jsx I have this

import React from 'react';
import { Web3ReactProvider } from '@web3-react/core/dist';
import Layout from '../components/Layout/Layout';
import './styles.css';
import { getLibrary } from '../config/web3';

//import "semantic-ui-css/semantic.min.css"; include library if you need

const MyApp = ({ Component, pageProps }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </Web3ReactProvider>
  );
};

export default MyApp;

But then I got

ReferenceError: window is not defined
    at Object.<anonymous> (/home/bjvalmaseda/Dev/Dochain/frontend/node_modules/web3/dist/web3.min.js:1:190)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.web3/dist/web3.min (/home/bjvalmaseda/Dev/Dochain/frontend/.next/server/pages/_app.js:669:18)
    at __webpack_require__ (/home/bjvalmaseda/Dev/Dochain/frontend/.next/server/webpack-runtime.js:33:42)

Answer 1

window is not defined on the server side. Since you are using NextJS I'm assuming you're doing SSR and that is where the error is raised.

To avoid this error you can:

1. Not use window (if possible)
2. Use useEffect hook

Sample:

useEffect(() => {
  if (window){
    window.addEventListener('keyup', setCorrectElement);
  }
  return () => {
    window.removeEventListener('keyup', setCorrectElement);
  }
}, [])

3. Check if window exists in the current context

if (typeof window === "undefined") /* you are on the server */ 

If this error is thrown from an external library chances are it does not support SSR.