Como resolvi o erro TS7016 no Vue (Vue Router + TypeScript)
Recentemente me deparei com um erro chato em um projeto Vue:
TS7016: Could not find a declaration file for module 'vue-router'
O projeto simplesmente não compilava, mesmo com tudo aparentemente instalado corretamente.
O que estava funcionando
- Vue 3 instalado corretamente
- Vue Router 4 instalado corretamente
- TypeScript atualizado
- Dependências instaladas sem erros
Ou seja: teoricamente tudo certo.
Investigando o problema
A primeira suspeita foi que o Vue Router não estivesse instalado corretamente.
Executei alguns comandos para verificar:
npm list vue
npm list vue-router
npm list typescript
O resultado mostrou que:
- Vue 3 estava instalado
- Vue Router 4 estava instalado
- TypeScript estava presente no projeto
Portanto, o problema não era uma dependência ausente.
Analisando o package.json do Vue Router
Ao verificar o arquivo:
node_modules/vue-router/package.json
encontrei a seguinte configuração:
"types": "dist/vue-router.d.mts"
Isso significa que os tipos do Vue Router estavam disponíveis, mas utilizando o formato moderno .d.mts.
A causa do erro
No arquivo tsconfig.json, encontrei a seguinte configuração:
"moduleResolution": "node"
Essa configuração é compatível com projetos mais antigos, mas pode apresentar problemas ao resolver pacotes modernos que utilizam:
- ESM (ECMAScript Modules)
- Export Maps (
exports) - Arquivos
.d.mts
Como consequência, o TypeScript não conseguia localizar corretamente os tipos do Vue Router.
A solução
Bastou alterar a configuração do TypeScript.
Antes
{
"compilerOptions": {
"moduleResolution": "node"
}
}
Depois
{
"compilerOptions": {
"moduleResolution": "bundler"
}
}
Após a alteração:
- Reiniciei o VS Code.
- Executei novamente:
npm run serve
O erro TS7016 desapareceu.
Outro problema encontrado
Depois de corrigir o TypeScript, surgiram erros relacionados a importações de componentes:
Module not found: Can't resolve '../components/MeuFormulario.vue'
O problema estava nos caminhos relativos.
Exemplo incorreto
import MeuFormulario from '../components/MeuFormulario.vue'
Exemplo corrigido
import MeuFormulario from '@/components/MeuFormulario.vue'
ou
import MeuFormulario from '../../MeuFormulario.vue'
dependendo da estrutura do projeto.
Resultado final
Após corrigir:
- Configuração do TypeScript
- Resolução de módulos
- Caminhos dos componentes
o projeto voltou a funcionar normalmente.
npm run serve
Compilação concluída com sucesso.
Lições aprendidas
- Nem todo erro de tipagem indica falta de dependência.
- O Vue Router 4 já possui seus próprios tipos.
- O problema pode estar na configuração do TypeScript.
moduleResolution: "bundler"é mais adequado para projetos Vue modernos.- Verificar caminhos relativos pode evitar horas de depuração.
Tecnologias utilizadas
- Vue 3
- Vue Router 4
- TypeScript 5
- Vue CLI 5
Conclusão
Quando encontrar o erro:
TS7016: Could not find a declaration file for module 'vue-router'
não assuma imediatamente que faltam dependências ou pacotes de tipos.
Antes disso, verifique:
- A versão do TypeScript
- A configuração do
tsconfig.json - O modo de resolução de módulos
- A estrutura dos imports do projeto
Uma pequena alteração na configuração pode ser suficiente para resolver o problema e colocar o projeto novamente em funcionamento.
