Recentemente, peguei uma aplicação em Flask que havia criado há algum tempo para um cliente — um gestor de Invoices — e decidi implementar um frontend em Vue.js para deixar o sistema mais moderno e responsivo.
Ao tentar criar o projeto Vue com o comando padrão do NPM, me deparei com um problema que parecia simples, mas exigiu algumas soluções estratégicas.
Passo 1: Tentativa inicial
Tentei iniciar o projeto Vue usando:
npm create vue@latest frontend
Mas o comando retornou o seguinte erro:
FetchError: request to https://registry.npmjs.org/create-vue failed, reason: connect ETIMEDOUT 2606:4700::6810:1d22:443
Percebi que era um problema de conexão. Aparentemente, o NPM não estava conseguindo acessar o registry do Vue para baixar os pacotes necessários.
Passo 2: Diagnóstico
Para entender melhor, testei a conectividade com o registry do NPM usando o comando ping:
ping registry.npmjs.org
O retorno indicava que o registro estava tentando ser acessado via IPv6:
Pinging registry.npmjs.org [2606:4700::6810:1d22] ...
Destination net unreachable.
Isso significava que minha rede ou minha máquina não estava configurada para lidar corretamente com IPv6, causando o timeout.
Passo 3: Forçando IPv4 no Node
Como a minha rede funcionava bem com IPv4, a solução foi forçar o Node a usar IPv4 na resolução de DNS. No PowerShell, isso pode ser feito definindo a variável de ambiente:
$env:NODE_OPTIONS="--dns-result-order=ipv4first"
Para testar se o IPv4 estava funcionando corretamente, rodei:
ping -4 registry.npmjs.org
O retorno confirmou que a conexão via IPv4 estava funcionando:
Pinging registry.npmjs.org [104.16.0.35] ...
Reply from 104.16.0.35: bytes=32 time=24ms TTL=54
Passo 4: Criando o projeto Vue com sucesso
Com essas correções, finalmente consegui criar o projeto Vue sem problemas:
npx create-vue@latest frontend
E tudo funcionou perfeitamente!
Conclusão
Esse processo me ensinou algumas lições importantes:
Problemas de rede podem aparecer de forma inesperada, especialmente em ambientes que tentam usar IPv6.
O Node pode priorizar IPv6, mesmo quando sua rede funciona melhor com IPv4.
Configuração do NPM e diretórios globais precisam estar corretos para que npx funcione.
Se você estiver tentando criar um projeto Vue e receber erros de timeout ou ENOENT, siga este passo a passo e provavelmente vai resolver rapidamente.