Como lidar com o erro __dirname não definido em módulos ES no React

Ao migrar para módulos ES em projetos React, é comum se deparar com o erro _dirname não definido. Isso acontece porque o _dirname é uma variável global do CommonJS, que não existe por padrão no padrão ES Modules.

Para solucionar isso, é preciso criar uma variável que represente o caminho do arquivo atual, usando o método fileURLToPath do módulo url, e depois derivar o diretório dele. Veja um exemplo básico: A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte.

import { fileURLToPath } from 'url'. import { dirname } from 'path'. const __filename = fileURLToPath(import.meta.url). const __dirname = dirname(__filename). 

Esse ajuste é essencial para manter compatibilidade e evitar erros em ambientes que usam ESM, principalmente ao lidar com rotas, importações dinâmicas ou manipulação de arquivos.

A implementação prática desse método ajuda na estabilidade do projeto e evita dores de cabeça na manutenção. No seu time, já passaram por isso ou usam alguma estratégia diferente pra lidar com caminhos em ESM? Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois.