reactjs - storybook TypeScriptin kanssa ei viittaa tsx-tiedostoon TypeScript-tiedostona - 'Parsing error: Missing semicolon'

En vain voi ymmärtää, miksi se tapahtui, yritin korjata sitä muutaman viikon ajan ja palasin vain JavaScriptiin tarinoissani.

tässä on haara, joka toistaa virheen. tämä on koko projekti. ./examples-kansiossa näet demon sovelluksen, joka toimii react-react-appin kanssa TypeScriptillä ja Storybookilla. sisällä näet src/stories/Xarrow.stories.tsx-tiedoston, joka suoritettaessa yarn storybook antaa Parsing error: Missing semicolon., aivan kuin yritin laittaa TypeScriptiä JavaScript-tiedostoon.

Käytän Storybookia versiota 6.2.9, jonka pitäisi tukea TypeScriptiä suoraan laatikosta alkaen versiosta 6.0.2beta

tässä on gitpod nopeaan esikatseluun: https://gitpod.io/#https://github.com/Eliav2/react-xarrows/blob/storybook-typescript-bug odota, kunnes riippuvuuksien asennus on valmis (näet esimerkin esikatselupopupin kohdassa :3000). avaa sitten uusi terminaali ja cd ./example ja suorita yarn storybook. näet täsmälleen samat virheet.

Tämä ongelma on ollut täällä muutaman viikon ajan, enkä ole aivan varma miksi.

Onko mitään ideaa? Olen jo yrittänyt poistaa ja asentaa Storybookin uudelleen, mutta se ei toiminut.

muistiinpanot :

• babel-loaderin ja react-scriptsin välisen riippuvuuskonfliktin takia jouduin tekemään kikan - .env-tiedosto, jossa on SKIP_PREFLIGHT_CHECK=true, jotta riippuvuuskonflikti sallittiin, mutta en oikein tiedä, liittyykö tämä ongelmaani.
• Koko projekti sisältyy vain projektitiedostoja, kuten package.json- ja tsconfig.json-tiedostoja, varten.
• ./-hakemistossa on tsconfig.json ja myös ./example-hakemistossa

Kaikki ideat olisivat erittäin arvostettuja!

Vastaus #1

Tämä oli ongelma eslintin kanssa. Minulla oli .estlintrc-konfiguraatiotiedosto juurihakemistossa, joka ei sopinut demo-projektiin.

Päivitin .eslintrc-tiedoston tukemaan TypeScriptiä (kuten täällä selitettiin), jota käytin, ja virhe katosi.

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