Fix folder structure errors in React

Question

I am new to React and had everything working before I decided to organize my code in folders and subfolders. Right now I'm getting this Module not found, but it isn't the "Can't resolve 'react' which there were some answers for. Maybe some of you might know this silly thing. Thanks in advance! I really appreciate it!

Here is the Compile error Image

Here is an image of my folder structure

Here is my Header.js

import React from 'react';
import './Header/CSS/Header.css';

// Class will consist of Header design and structure
const Header = (props) => {
    return (
        <header className="App-header">
        <div className="container">
            <button className="btn">
              <span>About</span>
            </button>
            <button className="btn">
              <span>Experience</span>
            </button>
            <button className="btn">
              <span>Education</span>
            </button>
            <button className="btn">
              <span>Projects</span>
            </button>
            <button className="btn">
              <span>Contact</span>
            </button>
          </div>
      </header>
    )
};

export default Header;

Here is my Header.css

/* 
  ========================
   HEADER Component
   CSS for the header   
  ========================
  */

 .App-header {
     background-color: black;
     min-height: 05vh;
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: calc(10px + 2vmin);
     color: white;
     padding: 5vw;
 }

 /* 
  ========================
   HEADER BUTTONS
  ========================
  */

 .container {
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .btn {
     margin: 5%;
     display: inline-flex;
 }

Here is my App.js

import React, { Component } from 'react';
import './App.css';
import Header from './Header/js/Header.js';
/* 
  ========================================
   App class
   Where everything is put together
   eg. Skeleton of my website
  ========================================
*/
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
      </div>
    );
  }
}

export default App;

Where is your `Header.css` file? You may be pointing it to the wrong path. — Bruno Monteiro, Feb 14 '20 at 02:28
Does this answer your question? [Can't resolve module (not found) in React.js](https://stackoverflow.com/questions/44439205/cant-resolve-module-not-found-in-react-js) — Charlie, Feb 14 '20 at 03:22

Bruno Monteiro · Accepted Answer · 2020-02-14T02:37:56.753

3

It should be

import '../CSS/Header.css';

../ (2 dot) goes back one folder, and ./ (1 dot) stay in the same directory.

Since your structure looks like this:

. src
.. Header
.... CSS
...... Header.css
.... JS
...... Header.js

Using ../ inside Header.js, will take you to the Header folder.

edited Feb 14 '20 at 02:37

answered Feb 14 '20 at 02:33

Bruno Monteiro

4,153
5
29
48

I get this -> ./src/Header/JS/Header.js Module not found: Can't resolve './CSS/Header.css' in 'C:\Users\leosu\Desktop\my-website\src\Header\JS' – Leo Santos Feb 14 '20 at 02:35
My bad, it was a typo. Use 2 dots. I updated the answer. – Bruno Monteiro Feb 14 '20 at 02:38
Now I get this - **./src/Header/JS/Header.js Module not found: Can't resolve './node_modules/react' in 'C:\Users\leosu\Desktop\my-website\src\Header\JS'** – Leo Santos Feb 14 '20 at 02:39
No problem! Glad to hear that :) – Bruno Monteiro Feb 14 '20 at 02:48

score 0 · Answer 2 · answered Feb 14 '20 at 02:20

0

Try changing your import route to import '.. /Header/CSS/Header.css';

answered Feb 14 '20 at 02:20

Omar Ureña

113
1
6

If I do that, I get this ./src/Header/JS/Header.js Module not found: Can't resolve '../Header/CSS/Header.css' in 'C:\Users\leosu\Desktop\my-website\src\Header\JS' – Leo Santos Feb 14 '20 at 02:25

score 0 · Answer 3 · answered Feb 14 '20 at 02:50

Within your config files, such as webpack config or Babel, you will need to use a OS agnostic method of finding files because:

Windows uses \ and everything else uses /

So require Node's built in path module

const path = require('path')

And in your config files use path and __dirname

// "target": "./dist"
"target": path(__dirname, '/dist')

Fix folder structure errors in React

3 Answers3