Neste artigo você aprenderá a como solucionar o erro ESLint Parsing error: Unexpected token, um problema bem comum de React JS
Fala programador(a), beleza? Bora aprender mais sobre os erros do React JS!
Desenvolvedores que utilizam o ESLint para melhorar a qualidade do código frequentemente se deparam com erros de parsing, como o famoso “ESLint Parsing error: Unexpected token”.
Este erro pode ser particularmente frustrante, pois muitas vezes a causa não é clara à primeira vista.
Neste artigo, vamos explorar algumas das causas comuns desse erro e como resolvê-las, especialmente no contexto de projetos React JS.
O que é ESLint e por que esse erro ocorre?
O que é ESLint?
O ESLint é uma ferramenta de linting para JavaScript, muito utilizada para identificar e corrigir problemas no código.
Ele se integra bem com diversos editores de código e pode ser personalizado para seguir as regras de estilo de código de sua equipe.
Por que o Erro de Parsing Acontece?
O erro “Parsing error: Unexpected token” geralmente ocorre quando o ESLint não consegue entender uma parte específica do seu código.
Isso pode ser devido a várias razões, incluindo mas não limitado a:
- Sintaxe inválida ou desconhecida
- Configurações erradas no arquivo
.eslintrc - Incompatibilidade com a versão do ECMAScript (JavaScript) utilizada
Solucionando o Erro em Projetos React JS
Vamos focar em como resolver esse erro em projetos React JS. É comum esse problema surgir quando estamos usando recursos mais modernos do JavaScript ou sintaxe JSX.
Atualize sua Configuração ESLint
Uma das primeiras coisas a verificar é se seu arquivo de configuração ESLint (geralmente .eslintrc ou .eslintrc.js) está configurado corretamente.
Para projetos React, certifique-se de que você está estendendo a configuração do React:
{
"extends": ["react-app", "plugin:react/recommended"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2021,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
}
}
Instale ou Atualize Dependências
Às vezes, o erro pode ser resolvido simplesmente atualizando as dependências do ESLint e dos plugins relacionados.
npm update eslint babel-eslint eslint-plugin-react
Verifique seu Código
Examine o código onde o erro está sendo apontado. Vamos usar um componente funcional React como exemplo:
function MeuComponente() {
const [estado, setEstado] = useState(null);
return (
<div>
{estado?.nome ?? "Nome não disponível"}
</div>
)
}
Neste exemplo, estamos usando o operador de encadeamento opcional (?.) e o operador de coalescência nula (??), ambos recursos mais novos do JavaScript.
Se o ESLint estiver configurado para uma versão mais antiga do ECMAScript, isso poderia causar o erro “Parsing error: Unexpected token”.
Para resolver isso, certifique-se de que a propriedade ecmaVersion em seu arquivo .eslintrc esteja atualizada.
"parserOptions": {
"ecmaVersion": 2021
}
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
Chegamos ao fim do artigo sobre como resolver o erro ESLint Parsing error: Unexpected token!
O erro “ESLint Parsing error: Unexpected token” pode ser um obstáculo no desenvolvimento, mas geralmente é um problema fácil de resolver.
O importante é identificar se o erro vem de uma sintaxe desconhecida, uma configuração ESLint incorreta ou uma dependência desatualizada.
Ao seguir as melhores práticas e manter suas configurações e dependências atualizadas, você pode minimizar a ocorrência desse erro e manter seu fluxo de desenvolvimento tranquilo e eficiente.
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.