Uncaught SyntaxError: Unexpected token ‘<’ — como resolver
Uncaught SyntaxError Unexpected token como: veja o passo a passo para aplicar com segurança, evitar erros e acelerar resultados de forma consistente.
Uncaught SyntaxError: Unexpected token ‘<’ — como resolver
O erro “Uncaught SyntaxError: Unexpected token ‘<’” é um dos problemas mais frustrantes e comuns para desenvolvedores web. Ele geralmente indica que o navegador esperava um script JavaScript, mas recebeu conteúdo HTML (que começa com a tag ’<’) ou algum outro formato inesperado. Entender e resolver o Uncaught SyntaxError Unexpected token como é crucial para a funcionalidade da sua aplicação, evitando falhas críticas e garantindo uma experiência de usuário fluida. Este tutorial completo guiará você pelo processo de diagnóstico e solução, passo a passo.
Preparação para a Solução
Antes de mergulhar nas etapas de depuração, é fundamental garantir que você tenha as ferramentas certas e uma abordagem metodológica. A preparação adequada economiza tempo e minimiza riscos.
- Acesso às Ferramentas de Desenvolvedor do Navegador: Chrome DevTools, Firefox Developer Tools ou equivalentes são indispensáveis. Eles permitem inspecionar o código, verificar a rede e o console de erros.
- Acesso ao Código-Fonte: Certifique-se de ter acesso ao seu projeto e ao servidor onde ele está hospedado. Isso inclui arquivos JavaScript, HTML e, se aplicável, scripts do lado do servidor (PHP, Node.js, Python, etc.).
- Controle de Versão (Opcional, mas Recomendado): Se você usa Git ou similar, faça um commit ou branch de segurança antes de fazer alterações significativas. Isso garante que você possa reverter facilmente, se necessário.
- Limpeza de Cache: Esvazie o cache do seu navegador e, se possível, do servidor ou CDN que você estiver usando. Caches desatualizados frequentemente causam esse tipo de erro ao servir arquivos antigos.
Checkpoint: Você tem acesso total às ferramentas de desenvolvimento e ao código? Seu cache foi limpo?
Passo a passo para resolver Uncaught SyntaxError Unexpected token como
Para resolver o erro Uncaught SyntaxError Unexpected token como, siga estas etapas sistemáticas. Cada passo foi projetado para isolar a causa raiz do problema, desde a inspeção básica até a análise profunda do servidor.
-
Identifique a Fonte do Erro
Abra as Ferramentas de Desenvolvedor (geralmente F12 ou Ctrl+Shift+I) no seu navegador. Vá para a aba “Console”. Você verá a mensagem “Uncaught SyntaxError: Unexpected token ’<’” acompanhada de um link para o arquivo e a linha onde o erro ocorreu. Clique nesse link para inspecionar o código problemático.
Em seguida, vá para a aba “Network” (Rede). Recarregue a página (Ctrl+F5 ou Cmd+Shift+R para recarga sem cache). Observe a lista de recursos carregados. Procure pelo arquivo JavaScript que o console indicou como fonte do erro. Clique nele e examine a aba “Response” (Resposta). Se o conteúdo exibido começar com
<!DOCTYPE html>ou<html>, você encontrou a causa: o servidor está enviando HTML em vez de JavaScript. -
Verifique o Atributo
srcna Tag<script>No seu arquivo HTML, localize a tag
<script>que tenta carregar o JavaScript problemático. Inspecione cuidadosamente o atributosrc.- Caminho Absoluto vs. Relativo: Verifique se o caminho está correto. Um caminho relativo (ex:
./js/script.js) pode falhar se o arquivo HTML for movido ou se a base URL for diferente do esperado. Caminhos absolutos (ex:/js/script.js) são geralmente mais robustos, mas ainda exigem que o arquivo esteja na raiz correta do servidor. - Erros de Digitação: Mesmo um único caractere errado pode fazer com que o navegador não encontre o arquivo, resultando em uma resposta HTML de “Página não encontrada” (404).
Exemplo:
<script src="/assets/js/minha-logica.js"></script> <!-- Verifique se "minha-logica.js" realmente existe em "/assets/js/" --> - Caminho Absoluto vs. Relativo: Verifique se o caminho está correto. Um caminho relativo (ex:
-
Confirme a Resposta do Servidor
Se o caminho parecer correto, o problema pode estar na forma como o servidor está respondendo. Na aba “Network” das Ferramentas de Desenvolvedor, observe o “Status” da requisição para o arquivo JS. Um status
200 OKcom conteúdo HTML ainda pode ser a causa. Mais importante, verifique o “Content-Type” no cabeçalho da resposta. Ele deve serapplication/javascriptoutext/javascript. Se fortext/html, o servidor está configurado incorretamente ou está entregando uma página de erro HTML.Para aprender mais sobre como o navegador interpreta diferentes tipos de conteúdo, você pode consultar a documentação oficial de desenvolvimento web, como a do MDN Web Docs sobre Content-Type.
-
Investigue Problemas no Servidor
O problema pode não ser o caminho, mas o que o servidor está enviando. Isso é comum em ambientes onde URLs são reescritas ou onde um CMS (WordPress, Joomla, etc.) está ativo.
- Arquivo Inexistente (404 Not Found): Se o servidor não encontrar o arquivo JS, ele pode retornar sua página 404 personalizada, que é HTML.
- Regras de Reescrita (mod_rewrite, Nginx rewrite): Verifique seu arquivo
.htaccess(Apache) ou configurações do Nginx. Regras mal configuradas podem redirecionar requisições de JS para um script PHP ou HTML. - Erros PHP/ASP.NET/Node.js no Script: Se você está gerando JavaScript dinamicamente (ex: um script PHP que gera JS), um erro de sintaxe no seu código do lado do servidor pode fazer com que ele retorne uma página de erro HTML em vez do JS esperado.
- Configuração de Mime Types: Garanta que seu servidor web (Apache, Nginx, IIS) esteja configurado para servir arquivos
.jscom oContent-Type: application/javascript.
-
Limpeza de Cache e CDN
Mesmo após corrigir o problema no servidor ou no código, caches antigos podem persistir. Certifique-se de que o cache do seu navegador foi limpo. Se você utiliza um CDN (Content Delivery Network) como Cloudflare, Akamai, etc., ou um plugin de cache no seu CMS, purgue o cache deles também. Muitos plugins de cache de WordPress, por exemplo, podem servir versões antigas de arquivos JS.
-
Teste e Confirmação
Após cada tentativa de correção, recarregue a página com o cache desabilitado (Ctrl+F5 ou Cmd+Shift+R) e verifique o console e a aba “Network” novamente. O objetivo é ver o arquivo JS sendo carregado com
Status: 200 OKeContent-Type: application/javascript, sem o erro no console.
Checkpoint: O erro “Uncaught SyntaxError Unexpected token como” desapareceu? O arquivo JS está sendo servido corretamente?
Erros comuns ao enfrentar Uncaught SyntaxError Unexpected token como
Ao tentar resolver o Uncaught SyntaxError Unexpected token como, alguns erros são mais frequentes. Conhecê-los pode acelerar seu processo de depuração.
- Caminhos Incorretos: O erro mais simples e comum é um
srcincorreto na tag<script>, levando o servidor a retornar uma página de erro HTML (404). - Conflitos de Servidor Web: Regras de reescrita de URL no
.htaccessou configurações do Nginx podem interceptar a requisição de um arquivo JS e servir outro conteúdo. - Problemas de Cache: Caches do navegador, do servidor ou de CDN podem continuar servindo a versão problemática do arquivo, mesmo após a correção.
- Geração Dinâmica de JS com Erros: Se seu JavaScript é gerado por uma linguagem de backend (PHP, Python, Ruby), um erro no script do lado do servidor pode fazer com que ele retorne HTML de erro em vez do JS limpo.
- Tags
<script>Mal Posicionadas: Embora menos comum para este erro específico, tags<script>dentro de comentários HTML ou em locais inesperados podem causar problemas de parsing.
Tabela de Erros Comuns e Soluções Rápidas
| Causa Potencial do Erro | Sintoma na Aba “Network” | Solução Rápida |
|---|---|---|
| Caminho do arquivo JS incorreto | Status 404 (Not Found) para o arquivo JS, Response é HTML | Verificar o atributo src na tag |
| Servidor retorna HTML em vez de JS | Status 200 OK, Content-Type: text/html, Response é HTML | Verificar regras de reescrita, configuração de Mime Types do servidor; purgar cache. |
| Cache desatualizado | Arquivo JS problemático persiste apesar das correções | Limpar cache do navegador (Ctrl+F5/Cmd+Shift+R); purgar cache do CDN/servidor. |
| Erro no script de backend que gera JS | Status 500 (Internal Server Error) para o arquivo JS, Response é HTML de erro | Verificar logs do servidor; depurar o script do lado do servidor. |
Checklist Final
Antes de considerar o problema totalmente resolvido, execute este checklist para garantir que todas as bases foram cobertas.
- O console do navegador está limpo de erros “Uncaught SyntaxError”?
- O arquivo JavaScript problemático está sendo carregado com um status
200 OKna aba “Network”? - O
Content-Typedo arquivo JavaScript na aba “Network” éapplication/javascriptoutext/javascript? - Você verificou seu arquivo
.htaccessou configurações de servidor para regras de reescrita? - Todos os caches (navegador, CDN, servidor) foram limpos após as correções?
- O erro persiste em diferentes navegadores ou em modo de navegação anônima/privada?
Perguntas frequentes
Por que esse erro acontece com a tag ’<’?
O caractere ’<’ é o início de todas as tags HTML. Quando o navegador está lendo um arquivo que ele espera ser JavaScript, mas encontra ’<’ no início, ele tenta interpretar isso como JavaScript, o que naturalmente falha, pois ’<’ não é um token JavaScript válido para iniciar uma expressão. Isso indica que o servidor está enviando um documento HTML em vez de um script JavaScript.
Posso ignorar esse erro?
Não, você não deve ignorar este erro. Ele indica que um script JavaScript crucial para sua aplicação não está sendo carregado ou executado corretamente. Isso pode resultar em funcionalidades quebradas, interatividade ausente e uma experiência de usuário degradada. Resolver o erro é fundamental para a saúde e funcionalidade do seu site ou aplicação.
Esse erro afeta o SEO?
Sim, indiretamente. Motores de busca como o Google rastreiam e renderizam páginas para entender seu conteúdo e funcionalidade. Se um script JavaScript que controla elementos importantes da página ou a navegação estiver quebrado por conta deste erro, o motor de busca pode ter dificuldade em indexar o conteúdo completo ou entender a interatividade da página. Isso pode levar a um ranqueamento inferior para páginas afetadas. Um site com muitos erros no console também sinaliza problemas de qualidade.
Conclusão
O erro “Uncaught SyntaxError: Unexpected token ‘<’” pode parecer assustador à primeira vista, mas com uma abordagem metódica, é possível diagnosticá-lo e resolvê-lo eficientemente. A chave é entender que o navegador recebeu HTML onde esperava JavaScript, e as causas geralmente se resumem a caminhos de arquivos incorretos, configurações de servidor equivocadas ou problemas de cache. Ao seguir os passos detalhados neste tutorial, você estará bem equipado para corrigir esse problema e garantir que seus scripts funcionem como esperado. Para mais dicas e artigos sobre desenvolvimento web e otimização, explore nosso blog e confira nossa categoria específica para erros e soluções em desenvolvimento web aqui.
Sobre Marcos Costa
Desenvolvedor backend com foco em arquitetura de software, automação e produtos digitais.
Ver mais artigos
