Next.js中使用Web3-react v6包裹应用时出现window未定义错误

错误原因 #

Next.js是服务端渲染框架，服务端执行代码时不存在浏览器的window对象，而web3库初始化时直接依赖window，导致服务端渲染阶段触发报错。

解决方案 #

核心思路是仅在客户端环境下加载web3和Web3ReactProvider，避免服务端执行依赖浏览器API的代码。

方法一：创建客户端专属的Web3Provider组件 #

1. 新建components/ClientOnlyWeb3Provider.jsx：

import React, { useEffect, useState } from 'react';
import { Web3ReactProvider } from '@web3-react/core';
import { getLibrary } from '../config/web3';

const ClientOnlyWeb3Provider = ({ children }) => {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    // 组件挂载后确认进入客户端环境
    setIsClient(true);
  }, []);

  // 服务端渲染时返回空占位，跳过依赖window的代码执行
  if (!isClient) return null;

  return <Web3ReactProvider getLibrary={getLibrary}>{children}</Web3ReactProvider>;
};

export default ClientOnlyWeb3Provider;

2. 修改_app.jsx，替换原有的Web3ReactProvider：

import React from 'react';
import ClientOnlyWeb3Provider from '../components/ClientOnlyWeb3Provider';
import Layout from '../components/Layout/Layout';
import './styles.css';

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

export default MyApp;

3. 调整../config/web3.js，确保web3仅在客户端加载：

let Web3;

// 仅在浏览器环境下导入web3
if (typeof window !== 'undefined') {
  Web3 = require('web3').default;
}

export function getLibrary(provider) {
  if (!Web3) {
    throw new Error('Web3仅在浏览器环境中可用');
  }
  return new Web3(provider);
}

方法二：使用Next.js动态导入（禁用SSR） #

直接在_app.jsx中动态导入Web3ReactProvider并关闭服务端渲染：

import React from 'react';
import dynamic from 'next/dynamic';
import Layout from '../components/Layout/Layout';
import './styles.css';

// 动态导入Web3ReactProvider，禁用服务端渲染
const Web3ReactProvider = dynamic(
  () => import('@web3-react/core').then(mod => mod.Web3ReactProvider),
  { ssr: false }
);

// 确保web3仅在客户端环境初始化
const getLibrary = (provider) => {
  const Web3 = require('web3').default;
  return new Web3(provider);
};

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

export default MyApp;

内容的提问来源于stack exchange，提问作者Barbaro Javier