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.
[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
- Open the file at the reported line/column and correct the actual syntax error.
- This is real source, not flake - retrying never helps.
- 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 (override example)
{ "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] }How to prevent it
- Keep JSX in
.tsx/.jsxso the default parser matches. - Run Prettier (or the compiler) locally so syntax errors surface before CI.
- Configure parser overrides for non-standard file types.