reactjs - storybook z typescript nie traktuje pliku tsx jako pliku typescript - 'Błąd analizy: Brak średnika'

Po prostu nie mogę zrozumieć, dlaczego to się stało, próbowałem to naprawić przez kilka tygodni i po prostu wróciłem do JavaScript w moich historiach.

oto gałąź, która odtwarza błąd. to jest cały projekt. w środku, w ./examples zobaczysz działającą aplikację demo z react-react-app z typescript i storybook. w środku zobaczysz src/stories/Xarrow.stories.tsx, który podczas uruchamiania yarn storybook wyrzuca Parsing error: Missing semicolon., dokładnie tak jakby próbowałem wstawić typescript do pliku javascript.

Używam Storybook w wersji 6.2.9, który miał wspierać TypeScript od razu od wersji 6.0.2 beta

oto gitpod do szybkiego podglądu: https://gitpod.io/#https://github.com/Eliav2/react-xarrows/blob/storybook-typescript-bug poczekaj, aż instalacja zależności się zakończy (zobaczysz wyskakujące okno podglądu przykładu na :3000). następnie otwórz nowy terminal i cd ./example i uruchom yarn storybook. zobaczysz dokładnie te same błędy.

Ten problem występuje od kilku tygodni i nie jestem do końca pewien, dlaczego.

Masz jakiś pomysł? Już próbowałem usunąć i ponownie zainstalować Storybook, ale to nie zadziałało.

notatki :

• Z powodu konfliktu zależności między babel-loader a react-scripts musiałem zastosować sztuczkę - plik .env z SKIP_PREFLIGHT_CHECK=true, aby pozwolić na konflikt zależności, ale tak naprawdę nie wiem, czy to jest związane z moim problemem.
• Cały projekt jest dołączony tylko dla plików projektowych, takich jak pliki package.json i tsconfig.json.
• w ./ znajduje się plik tsconfig.json oraz w ./example

Wszelkie pomysły byłyby bardzo mile widziane!

Odpowiedź #1

To był problem z eslint. Miałem plik konfiguracyjny .estlintrc w katalogu głównym, który nie pasował do projektu demonstracyjnego.

Zaktualizowałem plik .eslintrc, aby obsługiwał TypeScript (tak jak wyjaśniono tutaj), którego użyłem, i błąd zniknął.

{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "import",
    "@typescript-eslint"
  ],
  "rules": {
    // turn on errors for missing imports
    "import/no-unresolved": "error"
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [
        ".ts",
        ".tsx"
      ]
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
        // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
      },
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "parserOptions": {
    "ecmaVersion": 2021
  },
  "env": {
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}