react page not rendering

i have a hero component file in a component folder outside the src folder, then i have an admin folder inside the src folder where there is a file called AdminHome. Now i have been trying to import the the hero component into the AdminHome file so i can use it but it kept saying "Failed to resolve import "../components/Hero" from "src/page/admin/AdminHome.jsx"."

so this was how i tried to import the hero component to the AdminHome file

import Hero from "../components/Hero"

so with this i was expecting that the page will render on the browser but it didn't instead it was throwing an error saying "Failed to resolve import "../components/Hero" from "src/page/admin/AdminHome.jsx". Does the file exist?"

Solution

Based on what you've described, it looks like your relative path is not pointing to the right place. Let's say your directory structure looks like this:

src
  page
    admin
      AdminHome.jsx
components
  Hero.jsx

If that's the case, and you're importing Hero in AdminHome.jsx, your import path will look like ../../../components/Hero. This is because you need to go 1) from the admin to the page directory, then 2) from page to src, then 3) from src to the parent directory it shares with components.

The full import statement, then, would be import Hero from "../../../components/Hero"

(I think that's the right number of parent directories - if it's off try one less or one more).

There are some other possibilities - sometimes the import path wants you to include the file extension, depending on what framework you're working with I think. But to my eye it looks like you just need to traverse up the tree a little more to get to the right place.