Storybook fails on eslint errors in react - reactjs

Question

I have configured React, Storybook, Tailwind. everything worked properly. But After I added eslint it breaks storybook for every eslint errors.
.storybook/main.js
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;
},
};
Error
[ESLintError:
src/stories/Button.js
Line 2:23: 'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
src/stories/Header.js
Line 2:23: 'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
src/stories/Page.js
Line 2:23: 'prop-types' should be listed in the project's dependencies. 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 ", “, ", ” react/no-unescaped-entities
Search for the keywords to learn more about each error.]
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
error Command failed with exit code 1.

Answer 1

In my case I just wanted to disabled eslint errors during development so
DISABLE_ESLINT_PLUGIN=true start-storybook -p 6006 -s public
did the trick

Answer 2

Thanks for the question, I was struggling with this issue for a couple of hours...
The steps of my investigation are the following:
display the existing Webpack config:
webpackFinal: async (config) => {
console.log(config);
analyse configuration
bail: false,
stats: { preset: 'none', logging: 'error' },
the 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
by default the ESLintPlugin throws errors and fails
proof: https://webpack.js.org/plugins/eslint-webpack-plugin/#failonerror
trying to change the parameter failOnError to false, e.g.
new ESLintPlugin({
context: path.resolve(__dirname, '..'),
overrideConfigFile: path.resolve(__dirname, '..', '.eslintrc'),
extensions: ['js', 'jsx'],
files: ['./components', './theme'],
failOnError: false,
})
Now we can see warnings if we change the stats parameters:
webpackFinal: async config => {
config.stats = undefined;
config.plugins.push(

Answer 3

Running storybook with the ESLINT_NO_DEV_ERRORS option also does the trick:
ESLINT_NO_DEV_ERRORS=true npm run storybook
You can also set it and forget it as a storybook environment variable.

Answer 4

this is happened because ESLint is throwing errors instead of warnings!
and storybook can not start with that errors.
you have two ways to solve this problem!!
set 'warn' for all of the rules that you are using in your ESLint config file
use this package https://github.com/bfanger/eslint-plugin-only-warn to change all of rules to 'warn' automatically.