Storybook fails on eslint errors in react

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:

1. display the existing Webpack config:

      webpackFinal: async (config) => {
        console.log(config);

2. analyse configuration

  bail: false,
  stats: { preset: 'none', logging: 'error' },

3. 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
4. by default the ESLintPlugin throws errors and fails proof: https://webpack.js.org/plugins/eslint-webpack-plugin/#failonerror
5. trying to change the parameter failOnError to false , eg

      new ESLintPlugin({
        context: path.resolve(__dirname, '..'),
        overrideConfigFile: path.resolve(__dirname, '..', '.eslintrc'),
        extensions: ['js', 'jsx'],
        files: ['./components', './theme'],
        failOnError: false,
      })

6. 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!!

1. set 'warn' for all of the rules that you are using in your ESLint config file
2. use this package https://github.com/bfanger/eslint-plugin-only-warn to change all of rules to 'warn' automatically.