Web3OnboardProvider 导入后未定义，不会包装组件而不会抛出错误答案

【问题标题】：Web3OnboardProvider is undefined after importing, won't wrap Component without throwing errorWeb3OnboardProvider 导入后未定义，不会包装组件而不会抛出错误
【发布时间】：2022-11-05 16:20:05
【问题描述】：

不确定这里会发生什么。我正在使用此存储库中的样板代码： https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard-develop/examples/with-nextjs

这是 _app.js 的代码

import '../styles/globals.css'
import { Web3OnboardProvider, init } from '@web3-onboard/react'
import injectedModule from '@web3-onboard/injected-wallets'

const INFURA_KEY = ''

const ethereumRopsten = {
  id: '0x3',
  token: 'rETH',
  label: 'Ethereum Ropsten',
  rpcUrl: `https://ropsten.infura.io/v3/${INFURA_KEY}`
}

const polygonMainnet = {
  id: '0x89',
  token: 'MATIC',
  label: 'Polygon',
  rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
}

const chains = [ethereumRopsten, polygonMainnet]
const wallets = [injectedModule()]

const web3Onboard = init({
  wallets,
  chains,
  appMetadata: {
    name: "Web3-Onboard Demo",
    icon: '<svg>My App Icon</svg>',
    description: "A demo of Web3-Onboard."
  }
})

function MyApp({ Component, pageProps }) {
  return (
    <Web3OnboardProvider web3Onboard={web3Onboard}>
      <Component {...pageProps} />
    </Web3OnboardProvider>
  )
}

这是我被显示的错误

任何见解都会很棒

导出默认 MyApp

【问题讨论】：

标签： web3js

【解决方案1】：

您必须向 INFURA_KEY const 添加一个字符串

该字符串是您的 infura api 密钥

将密钥添加到 .env 文件并让您的 const 调用 node process.env $INFURA_KEY 通常更安全

【讨论】：