运行 JS 代码时出现“错误：元素类型无效”错误。 使用 Chakra-UI； 试图将元掩码与导航栏连接起来

Question

我正在尝试通过连接元掩码的基本集成来制作一个 web3 前端。 在这里，我制作了一个导航栏，其中包括一些页面路由和一个将网站连接到元掩码的按钮。 但是现在，当我运行开发人员时，我收到了以下错误：

服务器错误
错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。 您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

生成页面时发生此错误。 任何控制台日志都将显示在终端窗口中。

错误在于此源代码：

import Logo from './logo'
import NextLink from 'next/link'
import {
  Container,
  Box,
  Link,
  Stack,
  Heading,
  Flex,
  Menu,
  MenuItem,
  MenuList,
  MenuButton,
  IconButton,
  useColorModeValue
} from '@chakra-ui/react'
import { HamburgerIcon } from '@chakra-ui/icons'
import ThemeToggleButton from './theme-toggle-button'
import { IoLogoGithub } from 'react-icons/io5'
import ConnectWallet from './Metamask/ConnectWallet'
import ConnectedWallet from './Metamask/ConnectedWallet'
import useWeb3Modal from '../hooks/useWeb3Modal'


const LinkItem = ({ href, path, target, children, ...props }) => {
  const active = path === href
  const inactiveColor = useColorModeValue('gray200', 'whiteAlpha.900')
  return (
    <NextLink href={href} passHref scroll={false}>
      <Link
        p={2}
        bg={active ? 'grassTeal' : undefined}
        color={active ? '#202023' : inactiveColor}
        target={target}
        {...props}
      >
        {children}
      </Link>
    </NextLink>
  )
}

const Navbar = props => {
  const { web3Provider, address, balance } = useWeb3Modal()
  const { path } = props
  

  return (
    <Box
      position="fixed"
      as="nav"
      w="100%"
      bg={useColorModeValue('#ffffff40', '#20202380')}
      css={{ backdropFilter: 'blur(10px)' }}
      zIndex={1}
      {...props}
    >
      <Container
        display="flex"
        p={2}
        maxW="container.md"
        wrap="wrap"
        align="center"
        justify="space-between"
      >
        <Flex align="center" mr={5}>
          <Heading as="h1" size="lg" letterSpacing={'tighter'}>
            <Logo />
          </Heading>
        </Flex>

        <Stack
          direction={{ base: 'column', md: 'row' }}
          display={{ base: 'none', md: 'flex' }}
          width={{ base: 'full', md: 'auto' }}
          alignItems="center"
          flexGrow={1}
          mt={{ base: 4, md: 0 }}
        >
          <LinkItem href="/mint" path={path}>
            Minting 
          </LinkItem>
          <LinkItem href="/posts" path={path}>
            Posts
          </LinkItem>
          <LinkItem
            target="_blank"
            href=""
            path={path}
            display="inline-flex"
            alignItems="center"
            style={{ gap: 4 }}
            pl={2}
          >
            <IoLogoGithub />
            Source
          </LinkItem>
        </Stack>

        <Box flex={1} align="right">
          <ThemeToggleButton />

          <Box ml={2} display={{ base: 'inline-block', md: 'none' }}>
            <Menu isLazy id="navbar-menu">
              <MenuButton
                as={IconButton}
                icon={<HamburgerIcon />}
                variant="outline"
                aria-label="Options"
              />
              <MenuList>
                <NextLink href="/" passHref>
                  <MenuItem as={Link}>About</MenuItem>
                </NextLink>
                <NextLink href="/mint" passHref>
                  <MenuItem as={Link}>Works</MenuItem>
                </NextLink>
                <NextLink href="/posts" passHref>
                  <MenuItem as={Link}>Posts</MenuItem>
                </NextLink>
                <MenuItem
                  as={Link}
                  href=""
                >
                  View Source
                </MenuItem>
              </MenuList>
            </Menu>
          </Box>
        </Box>
      
      <Flex>
        {web3Provider ? <ConnectedWallet address={address} balance={balance} /> : <ConnectWallet />}
      </Flex>  
      </Container>
    </Box>
  )
}

export default Navbar
export { getServerSideProps } from '../components/chakra'

当我添加 web3Provider 时，我开始收到错误

const Navbar = props => {
  const { web3Provider, address, balance } = useWeb3Modal()
  const { path } = props
.
.
.
.
.
<Flex>
        {web3Provider ? <ConnectedWallet address={address} balance={balance} /> : <ConnectWallet />}
      </Flex>  

在添加这些之前，我没有收到任何错误，并且我的导航栏运行良好。 谁能告诉我我在哪里错了，或者只是编辑我的代码以连接metmask。

Ps:- ConnectWallet.js/ConnectedWallet.js 的源代码在[这里]。 我已将 url 添加到 GitHub，因为它会使问题变得不必要地冗长。

Answer 1

此错误与您可能忘记添加的导入/导出有关。

现在，我浏览了您的代码，在 Navbar.js 文件中似乎没有任何问题，所有导入都很好，您的 webpack 似乎也没有问题。

在你的 Github 中有一个名为 Metamask 的文件夹，你在其中编写了 ConnectWallet.js 的源代码； 您只需将源代码更改为：

import { Button } from '@chakra-ui/react'

import useWeb3Modal from '../../hooks/useWeb3Modal'

const ConnectWallet = () => {
  const { connect } = useWeb3Modal()
  return (
    <Button onClick={connect} colorScheme="teal" size="md">
      Connect Wallet
    </Button>
  )
}

export default ConnectWallet

这可能会解决您的问题。