storybook with typescript does not referring to tsx file as typescript file - 'Parsing error: Missing semicolon'

Question

我只是不明白为什么会这样，我尝试了几个星期来修复它，然后才回到 javascript 我的故事。

这是 branch which reproduces the bug. this is the full project. inside at ./examples you will see demo app running with react-react-app with typescript and storybook. inside you will see src/stories/Xarrow.stories.tsx，当运行ning 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

任何想法将不胜感激！

Answer 1

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

我更新了 .eslintrc 文件以支持我使用的打字稿（如解释的 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"
  ]
}

storybook with typescript does not referring to tsx file as typescript file - 'Parsing error: Missing semicolon'

storybook with typescript does not referring to tsx file as typescript file - 'Parsing error: Missing semicolon'

typescript

reactjs

storybook