So, as I was trying to work on the Navbar I faced an issue because, I need to import a NavLinks array, containing the text for the navLinks, which I created as an Array inside the index.js within a folder called “constants” inside the src.
this is how I imported it to the Navbar.jsx
import { useState } from "react";
import { navLinks } from "../constants";
const Navbar = () => {
return (
<div>home</div> )
}
export default Navbar
and this is what my file index.js looks like.
import { agile, behanceLogo, design_minded_icon, discordLogo, envelopeIcon, girlDesk3D, githubLogo, sassLogo, cssLogo, htmlLogo, javascriptLogo, linkedInLogo, messageIcon, mongodbLogo, moonIcon, multiculturalIcon, nodejsLogo, paperplaneIcon, personIcon, profile_bewerbung_foto, reactLogo,typescript_logo, paperplaneIcon, backtoTop } from "../assets";
export const navLinks = [
{
id: "home",
title: "Home",
},
{
id: "work",
title: "Work"
},
{
id: "about",
title: "About"
},
{
id: "contact",
title: "Contact"
}
];
export const features = [
{
id: "feature-1",
icon: agile,
title: "Agile",
content: "Experience with a methodology that emphasizes collaboration and continuous improvement.",
},
{
id: "feature-2",
icon: design_minded_icon,
title: "Design-minded",
content: "The driving aspect for any of my designs has a start in the consideration of human interaction and focus on the design principles.",
},
{
id: "feature-3",
icon: multiculturalIcon,
title: "Multicultural",
content: "I am an adaptable individual who has had experience working in a multicultural team.",
},
]
export const about =
{
title: "about",
parragraf1: "Hi there! 👋🏻 , My name is Nathalia Padron. I am originally from Caracas, Venezuela and I am currently based in Stuttgart, since 2016.",
parragraf2: "Before making the leap into Front-end Design I studied Product Design in IDC ( Instituto de Diseno de Caracas ) and worked several years as a Grafic Designer in Germany and Venezuela.",
parragraf3: "I feel comfortable working with CSS and JavaScript and I continue to learn React, I would love to extend my skillset to perform tasks related to UX/UI. Also, I have recently received a certification in MERN Stack and continue to learn and develop my understanding towards the backend.",
recently: "Recently I have been working with the following technology Stack",
logos: [
htmlLogo,
cssLogo,
javascriptLogo,
sassLogo,
typescript_logo,
reactLogo,
nodejslogo,
mongodbLogo,
],
}
export const technologieStack = [
{
title1: "Libraries & Frameworks",
technologies:
[
"Tailwind CSS",
"Bootstrap",
"Sass",
"React",
]
},
{
title2: "Design Tools",
technologies:
[
"GoogleFonts",
"Figma",
"Canva",
]
},
{
title3: "Other Tools",
technologies:
[
"VS Code",
"Git + Hub",
"Azure DevOps",
"Chrome Dev Tools",
]
},
]
export const cards = [
{
name: "MLAY TOURS",
content: "A MERN Stack project developed as a last project for a bootcamp I finished at DCI. Worked with a customer and developed brand identity.",
link: "",
}
]
export const contactForm = {
parragraf1: "I'm interested in a position within a team environment in a Web Agency working on large and creative projects.",
parragraf2: "However, if you have a request or question, don't hesitate to use this form.",
inputs: [
{
name: "Full name",
icon: personIcon,
},
{
name: "E.g [email protected]",
icon: envelopeIcon,
},
{
name: "leave me a Message",
icon: messageIcon,
},
],
sendbutton: "send",
icon: paperplaneIcon,
}
export const footer = [
{
id: "social-media-1",
icon: linkedInLogo,
link: "",
},
{
id: "social-media-2",
icon: behanceLogo,
link: "",
},
{
id: "social-media-3",
icon: githubLogo,
link: "",
},
{
id: "social-media-4",
icon: discordLogo,
link: "",
},
{
id: "goTotop",
icon: backtoTop,
link: "",
},
];
the app is crashing and says “Failed to resolve import “../assets” from “src/constants/index.js”.
it’s complaining because inside the index.js (where I created all the objects containing text and logos for the website) there is an import which is not resolving, the path to the “assets” folder is apparently wrong. I have checked the folder structure and it seems correct. The assets folder is on the same level as the components and constants folder inside the source. Do I need to do something extra to ensure that the images are being imported?
what I did was have all the pngs inside this assets folder and I am just writing the import in this way:
import { agile, behanceLogo, design_minded_icon, discordLogo, envelopeIcon, girlDesk3D, githubLogo, sassLogo, cssLogo, htmlLogo, javascriptLogo, linkedInLogo, messageIcon, mongodbLogo, moonIcon, multiculturalIcon, nodejsLogo, paperplaneIcon, personIcon, profile_bewerbung_foto, reactLogo,typescript_logo, paperplaneIcon, backtoTop } from "../assets";
the names provided inside the curly brackets are the names for each of the pngs
I quick look on your GitHub Profile made me find the problematic repository.
Problem: You are trying to import multiple files from a folder via named imports. Unfortunately, this is not how named imports work.
import { ... } from "../assets" tries to resolve an index file (index.ts(x) or index.js(x)), which is not present in that folder.
These files are also called barrel files. see: https://basarat.gitbook.io/typescript/main-1/barrel
Solution:
Directly reference the image files you want to import via default imports
import ReactLogo from "../assets/reactLogo.png"
As an Alternative you could also provide an index file which re-exports the image files as a named export
// assets/index.js
export { default as ReactLogo } from "./reactLogo.png";
export { default as TypeScriptLogo } from "./typescript_logo.png";
// index.js
import { ReactLogo, TypeScriptLogo } from "../assets"
Maybe you can provide some screenshots of the actual folder structure. Additionally, it is helpful to know which dev-server / bundler you are using. How did you bootstrap the project? Using create-react-app or something similar?