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

Question

I am trying to make a web3 frontend with just basic integration of connecting metamask. Here, I have made a Navbar, which include some page routes and a button to connect the website to metamask. But now, when I am running the dev, I am getting this error which state:

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.

The error lies in this source code:

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'

I started getting error, when I added web3Provider

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

Before adding these, I didn't got any error and my navbar was working ideally. Can anyone tell me where I am wrong here, or just edit my code such that the metmask is connected.

P.s:- The source code for ConnectWallet.js/ConnectedWallet.js is [here]. I have added the url to GitHub because, it would have made the question unnecessarily long.

Answer 1

This error is about an import/export, that you might have forgot to add.

Now, I went through your code and seems nothing wrong in the Navbar.js file, all the imports are good, and there seems no problem in your webpack as well.

In your Github, there's a folder called Metamask, where you have written the source code of ConnectWallet.js; you just have to change the source code to this:

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

This might solve your problem.