"Error: Element type is invalid" error is coming on running a JS Code. Used Chakra-UI; trying to connect metamask with navbar

Question

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

Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

错误出在这段源码中：-

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。

P.s:- ConnectWallet.js/ConnectedWallet.js 的源代码是 here。我已将 url 添加到 GitHub 因为这会使问题变得不必要地长。

我希望提供的信息足够。

Answer 1

此错误与您可能忘记添加的 import/export 有关。

现在，我检查了你的代码，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

这可能会解决您的问题。

"Error: Element type is invalid" error is coming on running a JS Code. Used Chakra-UI; trying to connect metamask with navbar

"Error: Element type is invalid" error is coming on running a JS Code. Used Chakra-UI; trying to connect metamask with navbar

javascript

reactjs

next.js

web3

metamask