TypeError: Cannot read properties of undefined (reading 'Contract') - Next.js, web3.0

Question

我正在尝试使用 next.js 创建一个小型 web3.0 应用程序。我已经在 rinkeby 测试网络上部署了我的合同，我能够使用 Remix 检查功能，是否正常工作。我也在 React 上做过类似的项目，它们也按预期工作。但是当我尝试连接时，我目前面临以下问题（也许这与 next.js 或 HttpProvider 的服务器端呈现有关，我不确定）：

TypeError: Cannot read properties of undefined (reading 'Contract')
  3 | import address from './build/campaignHubAddress.json';
  4 | 
> 5 | const instance = new web3.eth.Contract(contract.abi, address.campaignHubAddress);
    |                     ^
  6 | export default instance;

web3.js

import Web3 from 'web3';
let web3;
if (typeof window !== 'undefined' && typeof window.ethereum !== 'undefined') {
    window.ethereum.request({ method: "eth_requestAccounts" });
    web3 = new Web3(window.ethereum);
} else {
    const provider = new Web3.providers.HttpProvider(
        'https://rinkeby.infura.io/v3/3ed112ee6c4d42a09e485ddb5eec5fa2'
    );
    web3 = new Web3(provider);
}
export default web3;

instance.js

import web3 from 'web3';
import contract from './build/CampaignHub.json';
import address from './build/campaignHubAddress.json';

const instance = new web3.eth.Contract(contract.abi, address.campaignHubAddress);
export default instance;

index.js

import React from 'react';
import web3 from '../web3';
import instance from '../instance';

class Index extends React.Component{
    static async getInitialProps(){
        const campaigns = await instance.methods.getCampaigns().call();
        return { campaigns };
    }
    render() {
        return (
            <>
                <p>Hello, this is the test page for now.</p>
                <p>Web3 version: {web3.version}</p>
                <p>List of all the running campaigns: {this.props.campaigns} </p>
            </>
        );
    }
}
export default Index;

这看起来很基础，但我已经坚持了一段时间了。需要帮忙。如果需要，请询问任何说明。

Answer 1

您已经在 web3.js 中创建了您的 web3 实例不用"new"

就可以直接使用

import web3 from 'web3';
import contract from './build/CampaignHub.json';
import address from './build/campaignHubAddress.json';

const instance = web3.eth.Contract(contract.abi, address.campaignHubAddress);
export default instance;

Answer 2

绞尽脑汁，发现错误在instance.js。在导入 import web3 from 'web3'; 时我应该做 import web3 from './web3';

哇，浪费了很多时间。

TypeError: Cannot read properties of undefined (reading 'Contract') - Next.js, web3.0

TypeError: Cannot read properties of undefined (reading 'Contract') - Next.js, web3.0

reactjs

next.js

web3

provider

web3js