2
respostas

[Bug] Import Banner não está funcionando

Module not found: Error: You attempted to import /componentes/Banner which falls
outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

Quando ele pede para criar um arquivo jsconfig.json, esse erro aparece quando renomeio o import no Inicio de "../..componentes/Banner" para "/componentes/Banner".

Fiz o que a mensagem de erro sugeriu e coloquei esse arquivo dentro da pasta src e mesmo assim esse erro volta a aparecer. Já tentei inclusive fechar o terminal e reabrir o npm start após essa modificação, mas nada mudou.

EDIT: Consegui resolver já. Demorei para entender, mas o que o jsconfig.json faz é deixar os imports mais limpos ao serem gerados automaticamente quando apertamos CTRL + Espaço na hora de usar a tag de uma função. Fazendo isso, ele deixa como "/componentes/Banner", sem os ".."

Mas isso não funciona quando vamos importar manualmente. Se tivermos que importar uma imagem dos assets, por exemplo, pelo fato delas não terem tags e, portanto, não terem um import automático, precisamos usar os pontos (..) se essas imagens não estiverem na mesma pasta do arquivo que estamos mexendo.

Se eu estiver com algum conceito errado, corrijam-me por favor!

2 respostas

Olá, Eduardo! Fico feliz que você tenha conseguido resolver o problema, mas vou esclarecer um pouco mais sobre o que você mencionou para garantir que você esteja com o conceito correto.

Você está certo ao dizer que o arquivo jsconfig.json permite que você faça importações mais limpas em seu projeto React. O que ele faz é permitir que você importe módulos de maneira absoluta, ou seja, a partir do diretório src/ do seu projeto, em vez de ter que fazer importações relativas com ../../.

No entanto, é importante notar que isso não significa que você não pode mais usar importações relativas. Na verdade, em alguns casos, como você mencionou, você ainda precisará usar importações relativas. Por exemplo, se você estiver importando um arquivo que não está no diretório src/ ou se estiver importando um recurso como uma imagem que não é exportada como um módulo.

Por exemplo, se você tiver uma estrutura de diretório como esta:

src/
  componentes/
    Banner/
      index.js
  assets/
    imagem.jpg

E você está tentando importar imagem.jpg em index.js, você ainda precisará usar uma importação relativa, porque imagem.jpg não está no diretório src/. Então a importação ficaria assim:

import imagem from '../../assets/imagem.jpg';

Mas se você estiver importando um módulo que está no diretório src/, você pode usar uma importação absoluta. Por exemplo, se você tiver outro componente em src/componentes/OutroComponente/index.js, você poderia importá-lo em Banner/index.js assim:

import OutroComponente from 'componentes/OutroComponente';

Espero ter ajudado e bons estudos!

Obrigado pela resposta, Renan. Tive uma pequena dúvida com relação a seu post.

No primeiro exemplo, você disse que preciso usar importação relativa quando o arquivo não estiver no diretório src/, correto? Mas ao meu ver, a estrutura de diretório usada como exemplo possui as pastas componentes e assets e ambas estão dentro do src. O fato de precisar da importação relativa não teria mais a ver com ela ser uma imagem, que não é exportada como um módulo?