Exploring Chakra UI in my latest project has been an exciting journey for me. I made sure to install all the necessary dependencies and started importing components from the ChakraUI Docs.
Initially, I successfully imported and rendered the button feature. However, when I attempted to implement the Card feature, the page failed to load and only displayed a white screen.
Here's a peek into my .jsx file:
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'
// The rest of the JSX code goes here //
My Main.jsx :
import React from 'react'
import ReactDOM from 'react-dom/client'
import { ChakraProvider } from '@chakra-ui/react'
import App from './App'
// The ReactDOM rendering logic is shown here //
Lastly, my package.json:
{
"name": "portofolio-website-final",
"private": true,
// Other details about scripts and dependencies go here //
}
I'm struggling to pinpoint where I might have gone wrong with my implementation. Even after restarting the application, the issue persists. Any assistance or guidance on identifying the mistake would be greatly appreciated!