React isn't finding a module even though I set the path correctly

Question

I'm new to react, so I apologize for the noobness of this question.

I just created a new React application, and I've been playing around with the folder structure. Below is my current folder structure:

react-app
  |_ src
    |_ assets
      |_ images
        |_ logo
          |_ logo.svg
    |_ components
      |_ App
        |_ App.js
    index.js

In /react-app/src/components/App/App.js, I need to import logo.svg, which is located in /react-app/src/assets/images/logo/logo.svg.

In App.js, I have this line to import the logo:

import logo from '../assets/images/logo/logo.svg';

I get the following error:

./src/components/App/App.js
Module not found: Can't resolve '../assets/images/logo/logo.svg'

What I tried:

I put the logo.svg inside src/components/App and it loaded just fine with './logo.svg'

I then put the logo.svg inside src/components, and was able to load it with '../logo.svg'

I put it in src, and I get the error again when using '.../logo.svg'

Conclusion: I can't import logo.svg when it's more than two directories above the component that is trying to import it.

What am I missing here?

Jackyef Jackyef · Accepted Answer · 2019-11-14T01:16:16

You should change the import path to ../../assets/images/logo/logo.svg.

Each ../ denotes going up 1 directory.

So it goes like