NatIndustrial's questions

Então, enquanto eu estava tentando trabalhar na Navbar me deparei com um problema porque preciso importar um array NavLinks, contendo o texto para os navLinks, que criei como um Array dentro do index.js dentro de uma pasta chamada "constantes" dentro do src.

foi assim que importei para o Navbar.jsx

import { useState } from "react";
import { navLinks } from "../constants";

const Navbar = () => {
  return (
  <div>home</div>  )
}

export default Navbar

e é assim que meu arquivo index.js se parece.

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: "",
    },
  ];

o aplicativo está travando e diz "Falha ao resolver a importação "../assets" de "src/constants/index.js".

está reclamando porque dentro do index.js (onde criei todos os objetos contendo texto e logos para o site) existe uma importação que não está resolvendo, o caminho para a pasta "assets" aparentemente está errado. Verifiquei a estrutura da pasta e parece correta. A pasta de ativos está no mesmo nível da pasta de componentes e constantes dentro da fonte. Preciso fazer algo extra para garantir que as imagens estão sendo importadas?

o que fiz foi colocar todos os pngs dentro desta pasta de ativos e estou apenas escrevendo a importação desta forma:

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"; 

os nomes fornecidos entre chaves são os nomes de cada um dos pngs