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
– Bruno Monteiro, Commented Feb 14, 2020 at 2:28
Does this answer your question? Can't resolve module (not found) in React.js — Charlie
– Charlie, Commented Feb 14, 2020 at 3:22

Bruno Monteiro · Accepted Answer · 2020-02-14 02:37:56Z

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, 2020 at 2:37

answered Feb 14, 2020 at 2:33

Bruno Monteiro

4,5695 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Leo Santos Over a year ago

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'

Bruno Monteiro Over a year ago

My bad, it was a typo. Use 2 dots. I updated the answer.

Leo Santos Over a year ago

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'

Bruno Monteiro Over a year ago

No problem! Glad to hear that :)

MrCakes · Accepted Answer · 2020-02-14 02:20:42Z

0

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

answered Feb 14, 2020 at 2:20

MrCakes

1751 silver badge7 bronze badges

1 Comment

Leo Santos Over a year ago

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'

Sydney Y · Accepted Answer · 2020-02-14 02:50:01Z

0

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')

answered Feb 14, 2020 at 2:50

Sydney Y

3,1503 gold badges11 silver badges15 bronze badges

Collectives™ on Stack Overflow

Fix folder structure errors in React

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related