ChakraUI not rendering

Question

This is my first project using Chakra UI. I've installed all dependencies of ChakraUI itself and trying to import some components from the ChakraUI Docs.

I've managed to import and rendered the button feature, but after I tried it on the Card feature, the page won't load and just showed white screen.

Here's what my .jsx looks like

import React, { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLinkedin, faInstagram } from '@fortawesome/free-brands-svg-icons';
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
import './style.css';
import Tooltip from './tooltip.jsx';
import { Button, ButtonGroup } from '@chakra-ui/react'
import { Card, CardHeader, CardBody, CardFooter } from '@chakra-ui/react'

export default function App() {
  const [fadeIn, setFadeIn] = useState(false);

  useEffect(() => {
    setFadeIn(true);
  }, []);
  
  return (
    <div className={`fadeInpage ${fadeIn ? 'content-loaded' : ''}`}>
      <nav className="top-nav">
        <ul className="nav-links">
          <li><Button as="a" href="#home" colorScheme="teal" variant="ghost">
            Home
          </Button></li>
          <li><Button as="a" href="#about" colorScheme="teal" variant="ghost">
            About
          </Button></li>
          <li><Button as="a" href="#projects" colorScheme="teal" variant="ghost">
            Projects
          </Button></li>
        </ul>
      </nav>
      <aside className="sidebar">
        <ul>
          <li>
            <Tooltip message="LinkedIn">
              <a href="https://www.linkedin.com/in/amadeus-gavriel-tataming-59264021b/" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faLinkedin} /></a>
            </Tooltip>
          </li>
          <li>
            <Tooltip message="Instagram">
              <a href="https://www.instagram.com/itsdeus" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faInstagram} /></a>
            </Tooltip>
          </li>
          <li>
            <Tooltip message="Email">
              <a href="mailto:[email protected]"><FontAwesomeIcon icon={faEnvelope} /></a>
            </Tooltip>
          </li>
        </ul>
      </aside>
      <main>
        <div id = "landing-page" className = "fullpage">
          <h1>Journey of Mine</h1>
        </div>
        <div id="about" className="about-me">
          <h2>About Me</h2>
          <p>As a Robotics & AI undergraduate at Universitas Airlangga, my recent internship provided extensive experience in developing PRTG monitoring prototypes and web interfaces. My strong written English skills and reliability make me effective in both team and individual work environments. I'm actively seeking opportunities in the technology industry to hone my skills and contribute to society through innovative projects.</p>
        </div>
        <section id="projects" className="portofolio-item">
          <h2>Portfolio</h2>
          <div className="portfolio-item">
            <h3>Prototype Network Monitoring</h3>
            <p>I worked on a prototype for continuous data generation for network monitoring, which was then sent to InfluxDB for time-series monitoring on a Grafana Dashboard. This project was my introduction to database and network monitoring, using Python to integrate InfluxDB and Grafana for real-time analytics of metrics such as bandwidth and latency.</p>
          </div>
          <div className="portfolio-item">
            <h3>Community Service: STEM Education through Robotics</h3>
            <p>As part of a community service project, I assembled "Airoline" Line Follower Robots designed for easy and effective STEM education. Aimed at bridging the educational gap at SMP Yayasan Institut Indonesia, this initiative served as a model for other schools facing similar challenges. My role involved overcoming the lack of experience in assembly and navigating the COVID-19 era's constraints to progress in robotics education.</p>
          </div>
          <Card>
            <CardBody>
              <Text>View a summary of all your customers over the last month.</Text>
            </CardBody>
          </Card>
        </section>
      </main>
    </div>
  );
}

My Main.jsx :

import React from 'react'
import ReactDOM  from 'react-dom/client'
import { ChakraProvider } from '@chakra-ui/react'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>
)

Lastly, my package.json

{
  "name": "portofolio-website-final",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
    "framer-motion": "^11.0.14",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.1.6"
  }
}

I'm confused to what I did wrong here. I tried restarting the app, but didn't solve the problem. Can anyone help as to point where I did wrong? It'd be a great help!

Answer 1

I'll try to assume that this is due to the fact that you are using a <Text/> component that was not imported.

  <CardBody>
    <Text>View a summary of all your customers over the last month.</Text>
  </CardBody>

So, try to import Text component from chakra:

import { Card, CardHeader, CardBody, CardFooter, Text } from '@chakra-ui/react'