Question 284817 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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

Project set up

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;
Tags:

2

Answers


  1. 0

    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)

    Login or Signup to reply.
  2. 0

    If you intend to use relative paths, and that is how the project is configured. Usually, CRA (create-react-app) uses relative paths. First you have to understand file paths in React.

    In React, when you import components or modules using import statements, you specify the path to the file you want to import relative to the current file. A relative path starts from the current file’s location and navigates through the project’s directory structure to find the target file.

    Relative paths begin with ../ to move up one directory level. For example, ../ means Go up one level from the current directory. If you’re in /src/pages/about.js and you want to access a file in /src/components/about-components/Typewriter.js, you’d use ../components/about-components/Typewriter.

    Use as follows:

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

    Moreover, import About from './pages/about.js'; This line imports the About component from the about.js file located in the pages directory. It allows you to use the About component within the App component. In sucha a case like this. You don’t have to go back. You just have to access the folder, which is in the same level like this ./

    import About from './pages/about.js';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search