Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Quando trocamos de CRA para Vite, um dos maiores desafios que surge é fazer o debugger do VSCode funcionar corretamente, especialmente com sourcemaps. No meu time, a galera sempre reclama que o debugger não consegue mapear as linhas direito ou fica travando, o que acaba dificultando o desenvolvimento.
No artigo do StackOverflow, eles apontam que o problema está em como o Vite gera esses sourcemaps, que podem não estar compatíveis com o VSCode ou o navegador, causando esse comportamento estranho. A solução que encontrei foi ajustar as configurações do Vite para gerar sourcemaps compatíveis e, em alguns casos, usar plugins específicos para melhorar essa integração. A decisão fica mais saudável quando o time consegue medir o impacto depois.
A migração gradual, com atenção na configuração do build e do dev server, ajuda a evitar esse tipo de dor de cabeça. Além disso, sempre que possível, testei o debug em diferentes navegadores, pois Chrome e Firefox às vezes se comportam de forma diferente nesse cenário. Essa preparação evita que o desenvolvedor perca tempo com ajustes que parecem simples, mas podem travar seu fluxo de trabalho. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.
No seu caso, já tentou alguma dessas configurações de sourcemaps no Vite? Ou ainda está na fase de testes?
No front, acho que essa questão de sourcemaps é essencial pra DX, mas muitas vezes a gente esquece que ela depende bastante da configuração do bundler e do ambiente de desenvolvimento. Vale testar incrementalmente.
No meu time, a maior dor é mesmo o sourcemap. A gente optou por usar o plugin do Vite pra gerar sourcemaps mais compatíveis, e isso ajudou demais. Antes, os pontos do breakpoint ficavam perdidos demais.
A minha preocupação fica na compatibilidade, pq às vezes um ajuste que funciona no Chrome dá problema no Firefox. O ideal é fazer testes em vários navegadores antes de finalizar a configuração.
Interessante, Rafa. Você fez alguma alteração na configuração do build ou do dev server? Gosto de entender o que realmente resolve nesses casos.