下一个js中的web3Provider

Question

我试着在下一个JS中使用Web3-react v6，当我尝试用提供者包装mi肠应用程序时出现了一个错误，

在_app.jsx里我有这个

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;

但我得到了

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。由于您使用的是NextJS，我假设您正在执行SSR，这就是错误产生的地方。

要避免此错误，可以：

1. 不使用window (如果可能)
2. 使用useEffect hook

示例：

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

1. 检查window是否存在于当前上下文

中。

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

如果从外部库引发此错误，则可能不支持SSR。