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

By Daniel Zoghalchali·Latchkey

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]      |                    ^

Diagnose it: config resolution and version drift

Lint failures that appear only in CI are almost always a different linter version or a different resolved configuration, not new violations in the code.

Terminal

npx eslint --version
npx eslint --print-config path/to/file.ts | head -40
npx eslint --debug path/to/file.ts 2>&1 | grep -i "config" | head

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

// .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.

Frequently asked questions

What causes Prettier "SyntaxError: unexpected token"?

There are 2 common causes: genuine syntax error in the file and wrong parser for the file type. A real mistake - an unclosed tag/brace, a stray token, or invalid JSX - makes the file unparseable, so Prettier (like the compiler) cannot proceed.

How do I fix Prettier "SyntaxError: unexpected token"?

There are 2 fixes depending on which cause you have: fix the syntax the error points to and use the right extension/parser. Work through them in order, since the first is the most common.

What does Prettier "SyntaxError: unexpected token" actually mean?

Prettier aborts on a file with [error] <file>: SyntaxError: Unexpected token (L:C).

How do I stop Prettier "SyntaxError: unexpected token" happening again?

Keep JSX in .tsx/.jsx so the default parser matches. The prevention section lists 3 changes that keep it from recurring.