skip to Main Content

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


  1. 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.

    Login or Signup to reply.
  2. Well, looks like your components folder has a ‘component’ name instead of the ‘components’ you try to import.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search