Syntax error on spread operator in JSX component

[chetstone]

I'm using js2-mode 20200725.112 with emacs 28.0.50 and the setup advised in the README (js-mode with js2-minor-mode)

The following code gets a syntax error on {...this.props}

import React from 'react';

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('Current props: ', this.props);
      console.log('Previous props: ', prevProps);
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />;
    }
  };
}

This example is from the React blog on Higher Order Components (the second example at that anchor)

[dgutov]

Try https://github.com/felipeochoa/rjsx-mode/, it might be the best option for JSX now.

[matthemsteger]

Unfortunately, for those of us that use tabs for indentation, there is currently no real good solution. I was using rjsx-mode with a workaround for indentation that used js-mode. After emacs 27 landed it stopped working because of upstream changes and js2-mode not supporting 27 fully, see https://github.com/felipeochoa/rjsx-mode/issues/85.

If js-mode with JSX and js2-minor-mode doesn't work well, there is not really a way around it when writing JSX if you want to take advantage of the js2 ecosystem.

I am looking at switching to simply js-mode and tree-sitter (for better syntax highlighting ala rjsx-mode) but then I lose out on js2-refactor et al if js2-minor-mode doesnt work.

It would be pretty nice if js2-mode simply deferred again to emacs for indentation in emacs 27 when using JSX and it worked properly. Then the status quo from emacs 26 continues where I can set rjsx-mode to defer to js-mode for indentation (since it extends js2-mode).