Storybook fails on eslint errors in react

user_10057101 0
Viewed 2246

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.

storybook eslint reactjs
4 Answers

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

user_50319270

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);
  1. analyse configuration
  bail: false,
  stats: { preset: 'none', logging: 'error' },
  1. 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
  2. by default the ESLintPlugin throws errors and fails proof: https://webpack.js.org/plugins/eslint-webpack-plugin/#failonerror
  3. 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,
      })
  1. Now we can see warnings if we change the stats parameters:
  webpackFinal: async config => {
    config.stats = undefined;
    config.plugins.push(
user_62049100
user_51992810

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.
user_118833360
Related