reactjs - storybook cu typescript nu se referă la fișierul tsx ca fișier TypeScript - 'Eroare de analiză: Punct și virgulă lipsă'

Pur și simplu nu pot înțelege de ce s-a întâmplat, am încercat să repar timp de câteva săptămâni și m-am întors pur și simplu la javascript pentru poveștile mele.

iată branch-ul care reproduce bug-ul. acesta este întregul proiect. în interior, la ./examples, vei vedea o aplicație demo rulând cu react-react-app cu typescript și storybook. în interior vei vedea src/stories/Xarrow.stories.tsx care, atunci când rulezi yarn storybook, aruncă Parsing error: Missing semicolon., exact ca atunci când am încercat să pun typescript într-un fișier javascript.

Folosesc storybook v6.2.9, care ar trebui să suporte TypeScript din start începând cu v6.0.2beta

iată un gitpod pentru previzualizare rapidă: https://gitpod.io/#https://github.com/Eliav2/react-xarrows/blob/storybook-typescript-bug așteptați până se termină instalarea dependențelor (veți vedea că apare fereastra de previzualizare a exemplului la :3000). apoi deschideți un nou terminal și cd ./example și rulați yarn storybook. veți vedea exact aceleași erori.

Această problemă este aici de câteva săptămâni și nu sunt foarte sigur de ce.

Vreo idee? Am încercat deja să șterg și să reinstalez Storybook, dar asta nu a funcționat.

note :

• din cauza unui conflict de dependențe între babel-loader și react-scripts a trebuit să fac un truc - fișierul .env cu SKIP_PREFLIGHT_CHECK=true pentru a permite conflictul de dependențe, dar nu știu cu adevărat dacă asta are legătură cu problema mea.
• Întregul proiect este inclus doar pentru fișierele proiectului, cum ar fi fișierele package.json și tsconfig.json.
• există tsconfig.json în ./ și de asemenea în ./example

Orice idee ar fi foarte apreciată!

Răspuns #1

Aceasta a fost o problemă cu eslint. Aveam un fișier de configurare .eslintrc în directorul rădăcină, care nu era potrivit pentru proiectul demo.

Am actualizat fișierul .eslintrc pentru a suporta TypeScript (așa cum este explicat aici) pe care l-am folosit și eroarea a dispărut.

{
  "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"
  ]
}