recast SyntaxError: Unexpected token - codemod parser chokes on newer syntax

recast SyntaxError: Unexpected token - codemod parser chokes on newer syntax

TL;DR: Recast's default parser predates the newer syntax in your files. Tell recast to use its bundled Babel parser instead by passing parser: require("recast/parsers/babel") (or the babel-ts variant for TypeScript). Your transform logic is fine - only the parser needs swapping.

recast SyntaxError: Unexpected token - codemod parser chokes on newer syntax

Steps

1. Confirm it is the parser: the SyntaxError points at a modern feature (?., ??, class fields, TypeScript annotations) that your toolchain otherwise accepts. Expected: the flagged token is valid syntax in your project - the parser is the problem, not the code.

2. Swap the parser where you call recast.parse:

   const recast = require("recast");
   const ast = recast.parse(source, {
     parser: require("recast/parsers/babel-ts"),
   });

   Use recast/parsers/babel instead of babel-ts for plain JavaScript. Expected: parsing the same file now succeeds.

3. Keep using recast's printer for output - it preserves the original formatting; only the parser changes. Expected: output diffs look the same as before, the codemod just parses further.

4. Re-run the full codemod. Expected: no SyntaxError; files transform as intended.

Use this when

• Recast throws SyntaxError: Unexpected token on syntax that is valid in your project.
• The codemod worked on older files but chokes after the codebase adopted newer syntax.
• The error comes from recast.parse, not from your transform logic.

Not for this skill when

• The code is genuinely invalid - fix the code, not the parser.
• The Unexpected token comes from jscodeshift's own parser setup - different tool, different fix.
• The parse error is in the transform file itself rather than the files being transformed.

Variant phrasings

• recast unexpected token optional chaining
• recast parse typescript files
• recast babel parser codemod

Why it happens

Recast defaults to an older Esprima-based parser that predates modern syntax features. The Babel-based parsers bundled with recast understand current JavaScript and TypeScript, so pointing parse at them is the supported escape hatch.

Edge cases

• babel-ts covers .ts and .tsx; plain .js with modern syntax wants the babel variant.
• For exotic proposals you may need to pass extra parser options through - check the parser module recast ships for the supported options shape.
• Parse with one parser and print with another and you can get reformatted output - keep both on recast to preserve formatting.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_DtvnLgYmLJkc51vn8FqOMg