reactjs - storybook s typescriptom ne prepoznaje tsx datoteku kao typescript datoteku - 'Greška pri parsiranju: Nedostaje točka-zarez'

Jednostavno ne mogu shvatiti zašto se to dogodilo, pokušavao sam to popraviti nekoliko tjedana i samo sam se vratio na JavaScript u svojim pričama.

evo grane koja reproducira grešku. ovo je cijeli projekt. unutra u ./examples vidjet ćete demo aplikaciju koja radi s react-react-app s typescriptom i storybookom. unutra ćete vidjeti src/stories/Xarrow.stories.tsx koja pri pokretanju yarn storybook baca Parsing error: Missing semicolon. baš kao da sam pokušao staviti typescript u javascript datoteku.

Koristim Storybook v6.2.9 koji bi trebao podržavati TypeScript iz kutije od v6.0.2beta

evo gitpod za brzi pregled: https://gitpod.io/#https://github.com/Eliav2/react-xarrows/blob/storybook-typescript-bug pričekajte da instalacija ovisnosti završi (vidjet ćete primjer pregleda na :3000). zatim otvorite novi terminal i cd ./example i pokrenite yarn storybook. vidjet ćete točno iste pogreške.

Ovaj problem je prisutan već nekoliko tjedana i nisam sasvim siguran zašto.

Imaš li ideju? Već sam pokušao izbrisati i ponovno instalirati Storybook, ali to nije uspjelo.

bilješke :

• Zbog sukoba ovisnosti između babel-loader i react-scripts morao sam napraviti trik - .env datoteka s SKIP_PREFLIGHT_CHECK=true da bih omogućio sukob ovisnosti, ali zapravo ne znam je li to povezano s mojim problemom.
• cijeli projekt je uključen samo za projektne datoteke poput package.json i tsconfig.json datoteka.
• u ./ postoji tsconfig.json, kao i u ./example

Bilo kakve ideje bi bile vrlo cijenjene!

Odgovor #1

Ovo je bio problem s eslintom. Imao sam .estlintrc konfiguracijsku datoteku u korijenskom direktoriju koja nije bila prikladna za demo projekt.

Ažurirao sam .eslintrc datoteku da podržava TypeScript (kao što je objašnjeno ovdje) koju sam koristio i greška je nestala.

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