App.js
import React from 'react';
import './App.css';
import Home from './components/home/Home';
import Sidebar from './components/sidebar/Sidebar';
import About from './components/about/About'
import Services from './components/services/Services';
import Resume from './components/resume/Resume';
import Portfolio from './components/portfolio/Portfolio';
import Pricing from './components/pricing/Pricing';
import Testimonials from './components/testimonials/Testimonials';
import Blog from './components/blog/Blog';
import Contact from './components/contact/Contact';
const App = () => {
return (
<>
<Sidebar />
<main className='main'>
<Home />
<About />
<Services />
<Resume />
<Portfolio />
<Pricing />
<Testimonials />
<Blog />
<Contact />
</main >
</>
)
}
export default App
i already run npm test i have same error like this and also everytime try remove one of the components its will error to another components
Failed to compile.
./src/App.js
Module not found: Can’t resolve ‘./components/about/About’ in ‘E:PersonalReactJSAppmy–portfoliosrc’*
About.jsx this one of the components
import React from 'react';
import "./about.css";
import Image from "../../assets/avatar-2.svg";
import AboutBox from './AboutBox';
const About = () => {
return (
<section className="about container section" id='about'>
<h2 className="section__title">About me</h2>
<div className="about__container grid">
<img src={Image} alt="" className="about__img" />
<div className="about__data grid">
<div className="about__info">
<p className="about__description">Cedric Bides, a dedicated individual residing in the vibrant Philippines, deeply intrigued by the multifaceted realms
of web development, data analysis, and software quality assurance.</p>
<a href="/path/to/your/cv.pdf" className="btn" download>Download CV</a>
</div>
<div className="about__skills__grid">
<div className="skill__data">
<div className="skill__title">
<h3 className="skill__name">Development</h3>
<span className="skills__number">90%</span>
</div>
<div className="skill__bar">
<span className="skills__percentage development"></span>
</div>
</div>
<div className="skill__data">
<div className="skill__title">
<h3 className="skill__name">Data analysis</h3>
<span className="skills__number">90%</span>
</div>
<div className="skill__bar">
<span className="skills__percentage data__analysis"></span>
</div>
</div>
<div className="skill__data">
<div className="skill__title">
<h3 className="skill__name">Software Testing</h3>
<span className="skills__number">90%</span>
</div>
<div className="skill__bar">
<span className="skills__percentage software__testing"></span>
</div>
</div>
</div>
</div>
</div>
<AboutBox />
</section>
);
};
export default About;
2
Answers
you’re getting the “ Module not found” error because the component you’re trying to import wasn’t detected.
Double check the import path for
'./components/about/About'
and confirm you’re importing the component from the right directory.Well, looks like your components folder has a ‘component’ name instead of the ‘components’ you try to import.