Como resolver o erro ESLint Parsing error: Unexpected token

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.

Bloco curto focado no caso exato do símbolo de menor. Texto sugerido:

Tem um caso que confunde bastante: o erro apontando pro caractere < (o sinal de menor)

Esse < quase sempre é o começo de uma tag JSX, tipo <div> ou <MeuComponente />

Quando o ESLint reclama justo dele, o recado é claro: o parser não tá entendendo que ali existe JSX

Ou seja, ele leu seu return, bateu no primeiro < e travou, porque acha que aquilo é JavaScript comum

A raiz costuma ser uma de duas: o parser não tá preparado pra JSX, ou a flag de JSX não foi ligada nas opções

Na configuração que mostramos ali em cima, repare em duas coisas: o parser apontado pro Babel e o ecmaFeatures com jsx habilitado

É esse par que faz o ESLint aceitar a sintaxe de JSX sem cuspir o Unexpected token <

Se você copiou a config e mesmo assim continua, confira se o arquivo que dá erro é realmente um arquivo de componente (e não um .js solto sem JSX previsto na config)

Três perguntas curtas em formato pergunta+resposta:

O que significa o < no Unexpected token < ? É o começo de uma tag JSX que o ESLint não reconheceu. O parser leu o código como JavaScript puro e parou no primeiro sinal de menor. A saída é garantir parser e flag de JSX na config

Por que o erro aparece só em alguns arquivos? Geralmente porque a config de JSX não alcança aquele arquivo, ou porque ele usa uma sintaxe mais nova que a versão de ECMAScript definida não cobre

Mudei a config e o erro continua, e agora? Vale reiniciar o editor pra ele reler a configuração, conferir se o .eslintrc que você editou é o que está valendo no projeto e revisar se as dependências do ESLint estão atualizadas