带有打字稿的故事书没有将 tsx 文件称为打字稿文件-“解析错误：缺少分号”答案

【问题标题】：storybook with typescript does not referring to tsx file as typescript file - 'Parsing error: Missing semicolon'带有打字稿的故事书没有将 tsx 文件称为打字稿文件-“解析错误：缺少分号”
【发布时间】：2023-03-12 17:50:01
【问题描述】：

我只是不明白为什么会这样，我试图修复它几个星期，然后在我的故事中重新使用 javascript。

这是重现该错误的branch。这是完整的项目。在./examples 内部，您将看到演示应用程序与带有打字稿和故事书的 react-react-app 一起运行。在里面你会看到src/stories/Xarrow.stories.tsx，它在运行yarn storybook 时会抛出Parsing error: Missing semicolon.，就像我试图将打字稿放在javascript 文件中一样。

我正在使用 Storybook v6.2.9，它应该支持自 v6.0.2beta 以来开箱即用的打字稿

这是一个用于快速预览的 gitpod：https://gitpod.io/#https://github.com/Eliav2/react-xarrows/blob/storybook-typescript-bug 等到依赖项安装完成（您将在 :3000 看到示例预览弹出窗口）。然后打开新终端和cd ./example 并运行yarn storybook。您将看到完全相同的错误。

这个问题已经存在了几个星期，我不太清楚为什么。

有什么想法吗？我已经尝试删除并重新安装故事书，但没有成功。

注释：

因为 babel-loader 和 react-scripts 之间的 dependency conflict 我不得不做一个技巧 - .env 文件与 SKIP_PREFLIGHT_CHECK=true 允许依赖冲突，但我真的不知道这是否与我的问题有关.
仅包含项目文件（如 package.json 和 tsconfig.json 文件）的完整项目。
./ 和 ./example 中有 tsconfig.json

任何想法都将不胜感激！

【问题讨论】：

标签： reactjs typescript storybook

【解决方案1】：

这是 eslint 的问题。我在不适合演示项目的根目录中有 .estlintrc 配置文件。

我更新了 .eslintrc 文件以支持我使用的 typescript（如 here 解释）并且错误消失了。

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

【讨论】：