reactjs - typescript ile storybook, tsx dosyasını typescript dosyası olarak referans göstermiyor - 'Parsing error: Missing semicolon'

Sadece neden olduğunu anlayamıyorum, birkaç hafta boyunca düzeltmeye çalıştım ve hikayelerimde tekrar JavaScript'e geri döndüm.

işte hatayı tekrarlayan dal. bu tam proje. ./examples içinde, typescript ve storybook ile react-react-app çalıştıran demo uygulamayı göreceksiniz. içinde src/stories/Xarrow.stories.tsx dosyasını göreceksiniz; yarn storybook çalıştırdığınızda Parsing error: Missing semicolon. hatası veriyor, tıpkı javascript dosyasının içine typescript koymaya çalıştığım gibi.

v6.2.9 sürümündeki storybook'u kullanıyorum ve v6.0.2beta'dan itibaren TypeScript'i kutudan çıkar çıkmaz desteklemesi gerekiyor.

hızlı önizleme için işte bir gitpod: https://gitpod.io/#https://github.com/Eliav2/react-xarrows/blob/storybook-typescript-bug bağımlılık yüklemesi bitene kadar bekleyin (örn. önizleme :3000'de açılacak). ardından yeni bir terminal açın ve cd ./example komutunu çalıştırın ve yarn storybook komutunu çalıştırın. tam olarak aynı hataları göreceksiniz.

Bu sorun birkaç haftadır burada ve nedenini tam olarak bilmiyorum.

Herhangi bir fikrin var mı? Storybook'u silip yeniden yüklemeyi zaten denedim ama bu işe yaramadı.

notlar :

• babel-loader ile react-scripts arasındaki bağımlılık çakışması nedeniyle bir hile yapmak zorunda kaldım - bağımlılık çakışmasına izin vermek için SKIP_PREFLIGHT_CHECK=true içeren .env dosyası ama bunun gerçekten sorunumla ilgili olup olmadığını bilmiyorum.
• Tam proje, yalnızca package.json ve tsconfig.json dosyaları gibi proje dosyaları için dahil edilmiştir.
• ./ ve ./example içinde tsconfig.json dosyası var

herhangi bir fikir çok takdir edilir!

Cevap #1

Bu, eslint ile ilgili bir sorundu. Kök dizinde demo projesi için uygun olmayan bir .eslintrc yapılandırma dosyam vardı.

.eslintrc dosyasını Typescript'i destekleyecek şekilde (burada açıklandığı gibi) güncelledim ve kullandım, hata ortadan kalktı.

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