首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在现有typescript react项目中安装storybook在stories中抛出错误

在现有typescript react项目中安装storybook在stories中抛出错误
EN

Stack Overflow用户
提问于 2021-05-23 02:10:20
回答 1查看 100关注 0票数 0

我刚刚在typescript react项目中安装了storybook,但当我运行yarn storybook时,它开始抛出错误。这是它生成的代码,这是它抛出的"as“关键字的错误

代码语言:javascript
复制
-- Error message
Parsing error: Missing semicolon

  10 |     backgroundColor: { control: 'color' }
  11 |   }
> 12 | } as Meta;
     |  ^
  13 |
  14 | const Template: Story<ButtonProps> = (args) => <Button {...args} />;
  15 |eslint

-- code 

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' }
  }
} as Meta;

-- my eslint config
{
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
    "jest": true
  },
  "plugins": ["react", "prettier"],
  "extends": [
    "airbnb",
    "prettier",
    "eslint:recommended", // Uses the recommended rules from @eslint-plugin-react
    "plugin:react/recommended"
  ],

  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "allowImportExportEverywhere": true,
    "ecmaFeatures": {
      "jsx": true // Allows for the parsing of JSX
    }
  },
  "rules": {
    "prettier/prettier": "error",
    "no-console": "warn",
    "import/first": "warn",
    "quotes": ["error", "single", { "avoidEscape": true }],
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".ts"] }],
    "jsx-quotes": [2, "prefer-single"],
    "indent": ["error", 2],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "parser": "babel-eslint",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    },
    "react": {
      "version": "latest" // "detect" automatically picks the version you have installed.
    }
  }
}

--忽略下面的内容

Lorem Ipsum只是印刷和排版行业的虚拟文本。自15世纪以来,Lorem Ipsum一直是业界的标准虚拟文本,当时一家不知名的印刷商拿出了一个排版,然后把它弄乱了,做成了一个排版样本簿。它不仅存活了五个世纪,还经历了电子排版的飞跃,基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset sheets的发布而流行起来,最近又随着包括Lorem Ipsum版本的桌面出版软件Aldus PageMaker而流行起来。

EN

回答 1

Stack Overflow用户

发布于 2021-06-22 14:31:08

看起来您的babelrc文件中缺少@babel/preset-typescript预设。

以下是我的.babelrc的一个示例

代码语言:javascript
复制
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-transform-scss"
  ]
}

可以使用以下命令安装预设:

  • npm install --save-dev @babel/preset-typescript或-
  • yarn add -D @babel/preset-typescript

我已经为react项目准备了其他预置,但我希望这能对你有所帮助!

以下是官方文档:https://babeljs.io/docs/en/babel-preset-typescript#installation

送去善意

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67652785

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档