Não consigo importar o módulo do SelecionarIngredientes | Vue 3: entendendo componentes, diretivas e reatividade no framework

Olá,

Não consigo encontrar o component de Selecionar Ingrediente, apesar ter importação automática, aparece esta mensagem: Cannot find module './SelecionarIngredientes.vue' or its corresponding type declarations.ts-plugin(2307), segue código:

selecionar Sua lista:

    <li v-for="ingrediente in ingredientes" v-bind:key="ingrediente" class="ingrediente">
      {{ ingrediente }}
    </li>
    
  </ul>
  <p v-else class="paragrafo lista-vazia">
 <img src="../assets/images/icones/lista-vazia.svg" alt="Ícone de pesquisa">
 Sua lista está vazia, selecione ingredientes para iniciar.
  </p>
</section>
<SelecionarIngredientes />

TsConfig:

{ "extends": "@vue/tsconfig/tsconfig.dom.json", "include": ["env.d.ts", "src//*", "src//.vue"], "exclude": ["src/**/tests/"], "compilerOptions": { "composite": true, "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}

} }

Olá, Matheus, como vai?

Esse erro indica que o Vue não está encontrando o componente SelecionarIngredientes.vue na pasta indicada. Vamos verificar alguns pontos para ajudar a resolver:

Nome e Localização do Arquivo: Certifique-se de que o nome do arquivo está exatamente como mencionado, incluindo letras maiúsculas e minúsculas, e que ele está no caminho correto. Qualquer diferença, como SelecionarIngredientes.vue em vez de SelecionarIngredientes.Vue, por exemplo, pode causar problemas.
Caminho da Importação: Como você está usando a importação automática, o Vue precisa saber onde encontrar o arquivo. Confirme se ele está dentro da pasta que você definiu em "include": ["env.d.ts", "src//*", "src//*.vue"] no seu tsconfig.json. O asterisco duplo (**) ajuda a incluir subdiretórios, então pode ser interessante revisar ou ajustar o caminho no tsconfig.json.
Verifique o Cache do TypeScript: Às vezes, esse tipo de erro pode ser resolvido limpando o cache do TypeScript. Tente apagar a pasta node_modules/.tmp/, que contém arquivos temporários do tsconfig, e depois rode novamente o comando de build ou inicie o servidor.
Importação Explícita: Como uma alternativa de teste, experimente fazer a importação explícita no seu componente pai para ver se o erro persiste:

import SelecionarIngredientes from './caminho/para/SelecionarIngredientes.vue';
export default {
  components: {
    SelecionarIngredientes,
  },
};

Se nada acima funcionar, poderia me enviar o repositório com o código? Assim eu consigo analisar diretamente o que pode estar acontecendo de errado.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Mergulhe em programação