JSXSpread error filling terminal with non-useful debug information

[cdubois-mh]

bug

When the spread operator is miss-used, the compiler goes crazy and doesn't give the developper any hint on why something went wrong.

Inside a react es6 class, I was trying to render an array of jsx elements as follow:

class Modal extends Component {
[...]
    render() {
        let actions = [];
        for( let [ label, action ] in this.props.actions ) {
            actions.push(
                <input
                    key={ label }
                    type="button"
                    value={ label }
                    onClick={ this.onActionClicked( action ) }
                />
            );
        }

        return (
[...]
            <div className="alert-actions">
                { ...actions }
            </div>
        );
    }
}

I already know that I should've written { actions } and not { ...actions }.

I got an incredible load of errors that filled my terminal from babel compiler, the first error message being

did not recognize object of type "JSXSpreadChild"
at Object.getFieldNames

I would expect some error message telling me in which file, line and column the unrecognized JSXSpreadChild operator was found. In a huge project, without those critical information, it's way too hard to debug.

I'm using React 15.2.0 ( npm ) and babel-runtime 6.23.0
in meteor.

[babel-bot]

Hey @cdubois-mh! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[xtuc]

To spread an array you need to use:

[ ...actions ]

This isn't an issue in Babel. The error come from the object spread of an array passed to JSX.

As far as I remember you could directly use the actions array in JSX, like:

<div className="alert-actions">
   { actions }
</div>

[hzoo]

Pretty sure the issue is that the OP is saying we should have a "better" error message if you accidentally type { ...actions } instead of { actions}.

[cdubois-mh]

Like @hzoo mentioned, I was talking about what the error message displays.

I already know that I should've written { actions } and not { ...actions }.

In my post, I clearly stated that I already knew how to fix the error.
The problem is that I spent almost 3 hours just searching in my code where the error was.
I use the spread operator often ( with redux ) so since the error message didn't give me a position or even a file name, I was completely lost.

[hzoo]

Yep, this isn't really a high priority but definetely something we should do (I'm usually in favor of better error messages in general, although the tradeoff is a slower parse usually).