时间戳

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

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

问题描述

我只是不明白它为什么会发生，我试图修复它几个星期，然后在我的故事中回到 javascript。

这是重现错误的分支。这是完整的项目。在./examples中，您将看到使用带有打字稿和故事书的 react-react-app 运行的演示应用程序。在里面你会看到src/stories/Xarrow.stories.tsx在运行yarn storybookthrowing 时Parsing error: Missing semicolon.就像我试图将 typescript 放在 javascript 文件中一样。 在此处输入图像描述

我正在使用故事书 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。你会看到完全相同的错误。

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

任何想法？我已经尝试删除并重新安装故事书，但这没有用。

笔记：

任何想法将不胜感激！

标签： reactjstypescriptstorybook

解决方案

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

我更新了 .eslintrc 文件以支持我使用的打字稿（如此处所述）并且错误消失了。

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

推荐阅读