reactjs - 使用 TypeScript 的 Storybook 不将 tsx 文件识别为 TypeScript 文件 - '解析错误：缺少分号'

我就是不明白为什么会发生这种事，我尝试修复它几周，最终还是在我的项目中回到了 JavaScript。

这是重现该错误的分支。这是完整的项目。在 ./examples 目录下，你会看到一个使用 React-React-App、TypeScript 和 Storybook 运行的示例应用。在里面你会看到 src/stories/Xarrow.stories.tsx 文件，当运行 yarn storybook 时，会抛出 解析错误：缺少分号。，就像我尝试在 JavaScript 文件中放置 TypeScript 时一样。

我正在使用 Storybook v6.2.9，自 v6.0.2 测试版起，它应该已经开箱支持 TypeScript

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

这个问题已经存在几周了，我不太确定原因。

有什么想法吗？我已经尝试过删除并重新安装storybook，但这没有用。

笔记：

• 由于 babel-loader 和 react-scripts 之间的依赖冲突，我不得不使用一个技巧——在 .env 文件中设置 SKIP_PREFLIGHT_CHECK=true 来允许依赖冲突，但我并不真的知道这是否与我的问题相关。
• 完整的项目仅包含像 package.json 和 tsconfig.json 这样的项目文件。
• ./ 和 ./example 中都有 tsconfig.json

任何想法都将非常感激！

答案＃1

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

我更新了 .eslintrc 文件以支持 TypeScript（如这里所解释的），我使用后错误消失了。

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