ERROR in ./src/pages/about.js 5:0-78 Module not found: Error: Can't resolve

November 13, 2023

Hello I am trying to use react’s router to generate different pages.

The issue I am having is routing the about.js page to the app.js page. I am encountering the errors:

ERROR in ./src/pages/about.js 6:0-78
Module not found: Error: Can’t resolve ‘./src/components/about-components/Typewriter.js’ in ‘/Users/randolf/Desktop/Serious-Projects/portfolio-website/src/pages’

ERROR in ./src/pages/about.js 7:0-79
Module not found: Error: Can’t resolve ‘./src/components/about-components/Description.js’ in ‘/Users/randolf/Desktop/Serious-Projects/portfolio-website/src/pages’

ERROR in ./src/pages/about.js 8:0-65
Module not found: Error: Can’t resolve ‘./src/components/about-components/Logo.js’ in ‘/Users/randolf/Desktop/Serious-Projects/portfolio-website/src/pages’

I think this is an issue with the relative path I am using since the page is accessing the components from my components folder.
This is the code for my about.js page:

import { Navbar } from './src/components/navigation-components/Navbar.js'
import {Typewriting} from './src/components/about-components/Typewriter.js';
import {Description} from './src/components/about-components/Description.js';
import {Logo} from './src/components/about-components/Logo.js';

const About = () => {
return (
<div className='container'>
    <header>
        <Navbar/>
    </header>
    <div class="break"></div>
    <Typewriting/>
    <div class="break"></div>
    <Logo/>
    <Description/> 
</div>
);}; export default About;

And this is the code for the App.js:

import './App.css';
import { BrowserRouter as Router, Routes, Route }
    from 'react-router-dom';
import React from 'react';
import About from './pages/about.js';

function App() {
    return (
        <Router>
            <Routes>
                 <Route path='/' exact={<About />} />
            </Routes>
        </Router>
    );
 }

 export default App;

>Solution :

You are using absolute paths there in about.js, but they behave like relative ones.
The esiest way to fix is to change them to relative ones.

Given your folder strucure looks like as shown in the, image, try these imports:


import { Navbar } from '../components/navigation-components/Navbar.js'
import { Typewriting } from '../components/about-components/Typewriter.js';
import { Description } from '../components/about-components/Description.js';
import { Logo } from '../components/about-components/Logo.js';

The other reasons that can cause this issue:

you are using ESM imports, but none of your files has the proper extension (*.mjs)
maybe in package json you have to set module

As well as maybe TypeScript would be a huge help for you, if you not afraid of configuring it (or use the create-react-app with vite + ts what is the most common way these days)