I recently added storybook to my TypeScript React project, but I encountered an error when running yarn storybook. The issue seems to be related to the "as" keyword in the generated code.
-- Error message
Parsing error: Missing semicolon
10 | backgroundColor: { control: 'color' }
11 | }
> 12 | } as Meta;
| ^
13 |
14 | const Template: Story<ButtonProps> = (args) => <Button {...args} />;
-- 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.
}
}
}