Ошибка синтаксического анализа Typescript, когда EXTEND_ESLINT = true в приложении create-response-app

Урезанная демонстрация - GitHub

В настоящее время у нас есть проект create-react-app, который претерпевает постепенную миграцию с Flow на Typescript. Это означало отключение некоторых нежелательных правил ESLint. Чтобы настроить ESLint, я добавил EXTEND_ESLINT=true в .env файл.

Перед добавлением этого параметра мой код Typescript компилируется нормально. Впоследствии я получаю ошибки синтаксического анализа некоторых (но не всех) грамматик Typescript.

// Type guards
export function f0<T>(x: T|undefined): x is T { ...

// Constrained generics
export function f1<T extends number>(x: T) { ...

// Type assertions
... return x as T

Могут быть и другие нераспознанные синтаксисы, которых я еще не нашел.

Пока

  • Я не обнаружил подобных проблем или отчетов об ошибках. Я понимаю, что некоторые функции Typescript недоступны в текущей версии CRA, например const enum, но я не нашел упоминания о функциях, перечисленных выше. Я также почти уверен, что мои версии Typescript и ESLint совместимы с typescript-eslint.

  • Я пробовал много разных .eslintrc комбинаций. Я оставил несколько наиболее многообещающих в файле .eslintrc.js в прилагаемом репозитории. Текущая настройка - это один рекомендовано create-react-app, где в разделе overrides настраивается линтинг Typescript.

  • Конфигурация ESLint Typescript была настроена в соответствии с инструкциями из typescript-eslint monorepo , в частности, typescript-eslint/parser и _ 11_

Решения

  • Катапультирование - это не вариант. Если не удается найти другого решения, я бы предпочел просто выполнить преобразование Flow -> TS за один раз.

  • В настоящее время мы расширяем нашу конфигурацию CRA с помощью customize-cra. Решения, связанные с этим, приветствуются.

  • Мне нравится гибкость, которую дает мне .eslintrc, но я счастлив покончить с ней, при условии, что я все еще могу устанавливать правила линта.

Примечания

  • Я включил customize-cra в демонстрационный репозиторий, чтобы точно отразить наш проект, но проблема сохраняется без customize-cra, что указывает на то, что это, скорее всего, не виноват.

  • См. src/components/TestComponent/fn.ts, где приведены примеры синтаксиса проблемы.

  • Моя текущая гипотеза состоит в том, что в конфигурации CRA ESLint есть некоторые настройки, которые не переносятся, когда EXTEND_ESLINT=true.

Обновления


reactjs typescript create-react-app typescript-eslint parsing-error
person whitestripe    schedule 15.10.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

ОБНОВЛЕНИЕ: обновите сценарии реакции до последней версии не ниже 3.4.1. Исправлено.

Для версий сценариев реакции до 3.4.1:

Открыть node_modules/react-scripts/config/webpack.config.js

Замените блок кода из строки 365 этим кодом.

  if (process.env.EXTEND_ESLINT === 'true') {
    return undefined
  } else {
    return {
      extends: [require.resolve('eslint-config-react-app')],
    };
  }
})(),
useEslintrc: process.env.EXTEND_ESLINT === 'true',

Теперь, если вы запустите приложение с помощью yarn или npm, вы увидите, что оно исправлено.

Исправление изначально представлено здесь

https://github.com/facebook/create-react-app/issues/7776#issuecomment-567587642

Запустите npx patch-package react-scripts, чтобы сделать для него патч. И добавьте "postinstall": "patch-package" в раздел скриптов package.json.

Патч будет автоматически применен после npm install

person think-serious    schedule 30.12.2019

arrow_upward
0
arrow_downward

Для всех, кто сталкивается с этой проблемой, есть открытая проблема в CRA. что кажется причиной.

person whitestripe    schedule 13.11.2019