With babel-preset-react (EDIT: babel version: v6.26.0), the following expression fails with the error "Invalid left-hand side in arrow function parameters" (try on babel repl):

true ? ("test") : x => 42      //FAILS, but only with `babel-preset-react`

Yet it works given a small modification:

true ? "test" : x => 42        //works fine

Both of these scenarios work as expected in seemingly any other configuration.

Is this a bug? Or is there something as a part of JSX parsing that causes this to happen?

With babel-preset-react (EDIT: babel version: v6.26.0), the following expression fails with the error "Invalid left-hand side in arrow function parameters" (try on babel repl):

true ? ("test") : x => 42      //FAILS, but only with `babel-preset-react`

Yet it works given a small modification:

true ? "test" : x => 42        //works fine

Both of these scenarios work as expected in seemingly any other configuration.

Is this a bug? Or is there something as a part of JSX parsing that causes this to happen?

• javascript
• reactjs
• babeljs
• jsx

• 2 Likely this has to do with precedence of operators. Can you give a plete example that causes the error? – Code-Apprentice Commented Jan 17, 2018 at 20:50
• What are you looking for in a plete example? I've attempted to reduce the expression to the smallest example possible already. – uber5001 Commented Jan 17, 2018 at 20:53
• 3 This does sound like a bug for an EcmaScript parser indeed, a grouping parenthesis should be valid in every position where a string literal is valid. However, jsx or typescript or flow may have problems with the colon following the parenthesis. – Bergi Commented Jan 17, 2018 at 20:53
• 1 Sounds like a parser bug. Does this work? true ? ("test") : (x => 42) – Arash Motamedi Commented Jan 17, 2018 at 21:02
• @ArashMotamedi That works both with and without babel-preset-react – uber5001 Commented Jan 17, 2018 at 21:11

3 Answers 3

Arrow functions are parsed differently than regular ones see Parsing order

Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with operator precedence pared to regular functions.

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

It must have something to do with associativity of ternary operator (right-to-left) see link

The simple reason for this is that anything within () is treated as an condition to evaluate and hence it tries to find matching expressions after it which you aren't providing and hence it fails. As a matter of fact

true ? ("test")? 1: 2 : x => 42

piles just fine into

"use strict";

true ? "test" ? 1 : 2 : function (x) {
  return 42;
};

Check this demo

This is a bug. I've created an issue on the babel github page: babel/babel#7234. It is fixed in Babel 7.