Unexpected token in @babel/parser during optional chaining transformation

Question

When processing modern JavaScript syntax in Babel 7.x, the @babel/parser component throws an "Unexpected token" error if it encounters optional chaining syntax without the appropriate plugin enabled.

While enabling @babel/plugin-proposal-optional-chaining resolves the parsing failure, a configuration uncertainty arises when this is paired with @babel/plugin-proposal-nullish-coalescing. The resulting transpiled code varies based on the sequence in which these plugins are declared in the configuration array.

Because the Babel plugin documentation does not explicitly define the mandatory order for these specific syntax transforms, it is unclear which sequence ensures consistent output across different environment targets.

Does the order of these two plugins affect the logic of the generated AST?
  What is the recommended plugin sequence to ensure predictable output when both optional chaining and nullish coalescing are utilized?

Zoha · Answer

Answer
The order of @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing does not change the logic of the generated AST.
Why the order is irrelevant

Each plugin transforms a distinct syntactic token: ?. for optional chaining and ?? for nullish coalescing.
  The transformations are independent; they do not read or modify nodes created by the other plugin.
  Therefore applying them in any sequence yields the same final AST.

Recommended configuration for readability

List both plugins in your .babelrc, babel.config.js or equivalent.
  For consistent source ordering, place @babel/plugin-proposal-optional-chaining before @babel/plugin-proposal-nullish-coalescing (alphabetical order).
  Example:

{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing"
  ]
}

Verification steps

Ensure you are using Babel 7.9.0 or newer (the parser understands optional chaining natively).
  Run npm list @babel/core @babel/parser @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing and note the versions.
  If you are on an older version, upgrade or add the parser plugin @babel/plugin-transform-optional-chaining and @babel/plugin-transform-nullish-coalescing.
  Re‑run your build; the "Unexpected token" error should disappear and the output will be identical regardless of plugin order.

If you are using a Babel version older than 7.9.0, please confirm the exact version so we can advise whether a parser plugin is required.

Unexpected token in @babel/parser during optional chaining transformation

1 answer

Answer

Why the order is irrelevant

Recommended configuration for readability

Verification steps

Your perspective belongs here.

1 question comment

Clarification