How to beat ESLint: Parsing error: Unexpected token on empty tag?

Question

phpstorm

Hello.
I write in React, as it is recommended in rendering, I pack everything into one empty element <>
However, for some reason, ESLint crashes on it.
I can't figure out what's wrong. Anyone had it? How to decide?

render() {
    const { open } = this.state;

    return (
      <> //вот тут ошибка.
        <div onClick={this.toggle}>{this.props.children}</div>
        <Modal open={open} toggle={this.toggle}>
             ...
        </Modal>
      </>
    );
  }

Answer 1

The "empty tag" is actually a React.Fragement
component Solutions:
1. Use the full component notation:

return (
  <React.Fragement>
    {/* children */}
  </React.Fragment>
);

2. Install the required modules .
3. Make sure that the config and local modules are forwarded to your IDE plugin.

Answer 2

These are really problems purely PHP Storm. The out-of-box eslint does not work correctly, does not see everything that is needed, and produces errors like this.
The installation of the ESLint plugin helped, it sees everything and does not give strange errors.