reactjs - storybook med typescript refererer ikke til tsx-fil som typescript-fil - 'Parsing error: Missing semicolon'

Jeg kan bare ikke forstå hvorfor det skjedde, jeg prøvde å fikse det i noen uker og gikk bare tilbake til JavaScript på historiene mine.

her er grenen som reproduserer feilen. Dette er hele prosjektet. Inni på ./examples vil du se demoappen som kjører med react-react-app med typescript og storybook. Inni vil du se src/stories/Xarrow.stories.tsx som når du kjører yarn storybook kaster Parsing error: Missing semicolon. akkurat som når jeg prøvde å legge typescript inn i en javascript-fil.

Jeg bruker storybook v6.2.9 som skal støtte Typescript direkte fra versjon v6.0.2beta

her er en gitpod for rask forhåndsvisning: https://gitpod.io/#https://github.com/Eliav2/react-xarrows/blob/storybook-typescript-bug vent til avhengighetsinstallasjonen er ferdig (du vil se eksempel-forhåndsvisning dukke opp på :3000). åpne deretter et nytt terminalvindu og cd ./example og kjør yarn storybook. du vil se nøyaktig de samme feilene.

Dette problemet har vært her i noen uker, og jeg er ikke helt sikker på hvorfor.

Noen ide? Jeg har allerede prøvd å slette og installere Storybook på nytt, men dette fungerte ikke.

notater :

• på grunn av avhengighetskonflikt mellom babel-loader og react-scripts måtte jeg gjøre et triks - .env-fil med SKIP_PREFLIGHT_CHECK=true for å tillate avhengighetskonflikt, men jeg vet egentlig ikke om dette er relatert til problemet mitt.
• hele prosjektet er inkludert bare for prosjektfilene som package.json og tsconfig.json filer.
• det er tsconfig.json i ./ og også i ./example

alle forslag ville vært veldig verdsatt!

Svar #1

Dette var et problem med eslint. Jeg hadde en .estlintrc-konfigurasjonsfil i rotmappen som ikke passet for demoprosjektet.

Jeg oppdaterte .eslintrc-filen for å støtte TypeScript (som forklart her) som jeg brukte, og feilen forsvant.

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