[英]Storybook fails on eslint errors in react
I have configured React, Storybook, Tailwind.我已经配置了 React、Storybook、Tailwind。 everything worked properly.
一切正常。 But After I added eslint it breaks storybook for every eslint errors.
但是在我添加 eslint 之后,它会为每个 eslint 错误打破故事书。
const path = require('path');
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
[ESLintError: src/stories/Button.js Line 2:23: 'prop-types' should be listed in the project's dependencies. [ESLintError: src/stories/Button.js Line 2:23: 'prop-types' 应该列在项目的依赖项中。 Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
运行 'npm i -S prop-types' 将其添加 import/no-extraneous-dependencies
src/stories/Header.js Line 2:23: 'prop-types' should be listed in the project's dependencies. src/stories/Header.js 第 2:23 行:“prop-types”应该列在项目的依赖项中。 Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
运行 'npm i -S prop-types' 将其添加 import/no-extraneous-dependencies
src/stories/Page.js Line 2:23: 'prop-types' should be listed in the project's dependencies. src/stories/Page.js 第 2:23 行:“prop-types”应该列在项目的依赖项中。 Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies Line 28:11:
"
can be escaped with "
, “
, "
, ”
react/no-unescaped-entities Line 28:16: "
can be escaped with "
运行 'npm i -S prop-types' 将其添加 import/no-extraneous-dependencies Line 28:11:
"
can be escaped with "
, “
, "
, ”
react/no-unescaped-entities第 28:16 行: "
可以用"
转义。 , “
,
“
, "
,
"
, ”
,
”
react/no-unescaped-entities反应/无未转义实体
Search for the keywords to learn more about each error.]搜索关键字以了解有关每个错误的更多信息。]
WARN Broken build, fix the error above. WARN Broken build,修复上面的错误。 WARN You may need to refresh the browser.
WARN 您可能需要刷新浏览器。
error Command failed with exit code 1.错误命令失败,退出代码为 1。
In my case I just wanted to disabled eslint errors during development so就我而言,我只是想在开发过程中禁用 eslint 错误,所以
DISABLE_ESLINT_PLUGIN=true start-storybook -p 6006 -s public
did the trick成功了
Thanks for the question, I was struggling with this issue for a couple of hours...感谢您的问题,我在这个问题上苦苦挣扎了几个小时......
The steps of my investigation are the following:我的调查步骤如下:
webpackFinal: async (config) => {
console.log(config);
bail: false,
stats: { preset: 'none', logging: 'error' },
bail
parameter is false
what's fine, but preset: 'none'
means to show nothing - let's park it, we will need it later proof: https://webpack.js.org/configuration/stats/#stats-presets bail
参数是false
没关系,但是preset: 'none'
意味着什么都不显示 - 让我们停一下,我们稍后需要它证明: https://webpack.js.org/configuration/stats/#stats-presetsfailOnError
to false
, egfailOnError
更改为false
,例如 new ESLintPlugin({
context: path.resolve(__dirname, '..'),
overrideConfigFile: path.resolve(__dirname, '..', '.eslintrc'),
extensions: ['js', 'jsx'],
files: ['./components', './theme'],
failOnError: false,
})
stats
parameters:stats
参数,我们可以看到警告: webpackFinal: async config => {
config.stats = undefined;
config.plugins.push(
Running storybook with the ESLINT_NO_DEV_ERRORS option also does the trick:使用ESLINT_NO_DEV_ERRORS选项运行 storybook 也可以解决问题:
ESLINT_NO_DEV_ERRORS=true npm run storybook
You can also set it and forget it as a storybook environment variable .您也可以将其设置为故事书环境变量,然后将其忘记。
this is happened because ESLint is throwing errors instead of warnings.这是因为 ESLint 抛出错误而不是警告。 and storybook can not start with that errors.
故事书不能从那个错误开始。 you have two ways to solve this problem!!
你有两种方法可以解决这个问题!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.