Skip to content
Latchkey

Prettier "SyntaxError: Unexpected token" - Fix Parse Failures in CI

Prettier must parse a file before it can format it. A SyntaxError means the file has invalid syntax, or Prettier used a parser that does not match the file's actual language.

What this error means

Prettier aborts on a file with [error] <file>: SyntaxError: Unexpected token (L:C). Unlike "Code style issues found", this is a hard parse failure - Prettier cannot even read the file to format it.

prettier output
[error] src/components/Card.tsx: SyntaxError: Unexpected token, expected ";" (14:23)
[error]   12 | function Card() {
[error]   13 |   return (
[error] > 14 |     <div className="card">
[error]      |                    ^

Common causes

Genuine syntax error in the file

A real mistake - an unclosed tag/brace, a stray token, or invalid JSX - makes the file unparseable, so Prettier (like the compiler) cannot proceed.

Wrong parser for the file type

JSX in a .ts file (instead of .tsx), or a parser override that does not match the language, makes Prettier choose a parser that rejects valid-for-another-language syntax.

How to fix it

Fix the syntax the error points to

  1. Open the file at the reported line/column and correct the actual syntax error.
  2. This is real source, not flake - retrying never helps.
  3. Verify the file also parses for your compiler/bundler (the same error often shows there).

Use the right extension/parser

Put JSX in .tsx/.jsx, or set an explicit parser override for unusual file types.

.prettierrc
// .prettierrc (override example)
{ "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] }

How to prevent it

  • Keep JSX in .tsx/.jsx so the default parser matches.
  • Run Prettier (or the compiler) locally so syntax errors surface before CI.
  • Configure parser overrides for non-standard file types.

Related guides

Tired of flaky CI? Latchkey auto-heals failed jobs and retries them for you. Start free →