Как победить ESLint: Parsing error: Unexpected token на пустом теге?

Question

[aivazovski]

Всем привет.
Пишу на реакте, как и рекомендуется в рендере всё упаковываю в один пустой элемент <>
Однако почему то ESLint на нём крашится.

Не могу понять, в чём дело. У кого нибудь было? Как решить?

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

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

Comments

[Mikhail Osher]

покажите eslint config

Answer 1

[Антон Спирин]

"Пустой тег" на самом деле является компонентом React.Fragement

Варианты решения проблемы:
1. Использовать полную запись компонента:

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

2. Установить необходимые модули.

3. Убедиться что конфиг и локальные модули прокинуты в плагин вашей IDE.

Comments

[aivazovski]

К сожалению установка не помогла. Видимо это какие то проблемы phpstorm. У других разработчиков нет проблем с коротким синтаксисиом react.fragment

Answer 2

[aivazovski]

Это действительно проблемы чисто PHP Storm. Изкоробочный eslint работет некорректно, не видит всё что нужно, и выдает вот такие ошибки.

Помогла установка плагина ESLint, он видит всё и странных ошибок не выдаёт.

Comments

[Антон Спирин]

Отлично встроенный плагин работает. Если у вас в проекте не стандартное имя конфига или расположение пакетов, то его естественно надо настраивать.

[aivazovski]

.eslintrc лежит в корне
node_modules в корне
eslint package в node_modules
Что настроенно не так ?