Search code examples
reactjsdeploymentsymlink

error while deploying my a react js project

My build keeps failing when I try to deploy my project. The error:

"Module not found: Error: You attempted to import /home/name/HUMMINGBIRD/hummingbird/src/assets/Heropic.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported."

but I don't understand this error as the file mentioned is in the src folder, and when I try to use a relative path, i.e.:

import facebook from "src/assets/facebook.png"

I get this error

"Module not found: Error: Can't resolve 'src/assets/facebook.png' in '/home/name/HUMMINGBIRD/hummingbird/src/Components/Footer' ERROR in ./src/Components/Footer/Footer.js 6:0-47 Module not found: Error: Can't resolve 'src/assets/facebook.png' in '/home/name/HUMMINGBIRD/hummingbird/src/Components/Footer'"

The deployment service I'm using suggested using symlinks but admittedly I don't fully understand them yet.

What should I do?

This is how I'm importing the images inside the react project:

import React from "react";
import "/home/name/HUMMINGBIRD/hummingbird/src/Components/Footer/Footer.css";
import facebook from "/home/name/HUMMINGBIRD/hummingbird/src/assets/facebook.png"; 
import instagram from "/home/name/HUMMINGBIRD/hummingbird/src/assets/instagram.png"; 
import linkedin from "/home/name/HUMMINGBIRD/hummingbird/src/assets/linkedin.png"; 
import twitter from "/home/name/HUMMINGBIRD/hummingbird/src/assets/twitter.png";
Solution

  • Seems like the way you are importin the images is wrong. The way to import the image is to go back from the file position to the image position.

    for example:

    If my folder structure looks like this:

    root
- src
-- assets
--- images
---- myImage.png
-- components
--- MyCustomComp
---- index.jsx
-- pages
-- util
...

    So inside index.jsx, we will import images from the assets folder this way:

    import myImage from "../../assets/images/myImage.png"

    every ../ is one directory up. from index.jsx to go up to assets we need to go two directories up. ../../ , this will put us in the src folder. now we can access the assets folder -> images -> myImage.png

    if the file/image is inside the same folder with the index.jsx - then you just need ./

    Its true not only for images, but for any other file.