How disable eslint-loader of storybook's webpack?

Question

I would like disable eslint-loader of storybook's webpack, cuz I use other process to validate the code's quality.

I know exists the webpack's config about storybook like code below and maybe I could use some filter on config.rules , but maybe isn't good:

const path = require('path')

module.exports = async ({ config }) => {
  // some modifications

  return config
}

I've trying searching on storybook's docs about this, but didn't find anything about.

Answer 1

I've had a similar problem, In my case I was using create-react-app and customize-cra to disable eslint, since I'm also using my own linter config, but I run into a problem with Storybook using different linting rules, and complaining about my source code.

I then realised that I could just look at the source code of customize-cra to find out how they disabled eslint in webpack and it worked.

disableEsLint = (e) => {
  return e.module.rules.filter(e =>
    e.use && e.use.some(e => e.options && void 0 !== e.options.useEslintrc)).forEach(s => {
      e.module.rules = e.module.rules.filter(e => e !== s)
    }), e
}

module.exports = function ({ config }) {
  // Same config, except it is missing the eslint rule
  config = disableEsLint(config);

  // Do any thing else you want here
  config.module.rules.unshift({
    test: /\.story\.tsx?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: { parser: 'typescript' },
      },
    ],
    enforce: 'pre',
  });

  // return the new config
  return config;
};

I'm not sure if this will work for your case but it worth a try.

Other suggestions are try to console log config in webpack, find the rule's name and config.module.rules.delete('your-rule-name')

In my case rules didn't have a name / or I coudn't find it.

Answer 2

Solution with plugin instanceof EslintWebpackPlugin didn't help me, but this approach helped:

//.storybook/main.js

module.exports = {
  webpackFinal: config => {
    return {
      ...config,
      plugins: config.plugins.filter(plugin => {
        if (plugin.constructor.name === 'ESLintWebpackPlugin') {
          return false
        }
        return true
      }),
    }
  },
}

PS the new version will have a CLI parameter to disable eslint: https://github.com/storybookjs/storybook/pull/13452 , 6.2.0-alpha.7 already supports it

Answer 3

Use this example for understanding how to customize storybook's default config.

Then you need to filter the rules array in that config.

module.exports = {
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
      rules: config.module.rules.filter(rule => {
        if (!rule.use) return true;
        return !rule.use.find(
          useItem => typeof useItem.loader === 'string' && useItem.loader.includes('eslint-loader'),
        );
      }),
    },
  },
};

Answer 4

Seems that newer storybook versions use the eslint-webpack-plugin instead, so the needed change now looks something like this:

--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const EslintWebpackPlugin = require('eslint-webpack-plugin');
+
 module.exports = {
    stories: ['./stories/*.stories.tsx'],
    addons: [
@@ -8,4 +11,17 @@ module.exports = {
        '@storybook/addon-links',
        '@storybook/addon-controls',
    ],
+   webpackFinal: config => {
+       return {
+           ...config,
+           plugins: config.plugins.filter(plugin => {
+               // Remove the eslint-webpack-plugin: We already check our code, storybook doesn't need to bother
+               // doing it again with potentially different options.
+               if (plugin instanceof EslintWebpackPlugin) {
+                   return false;
+               }
+               return true;
+           }),
+       };
+   },
 };

Answer 5

storybook v6.3: from the default config, just comment out the create-react-app preset addon:

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    // '@storybook/preset-create-react-app'    - HERE - comment this out
  ],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

create react app preset will stop your build if it finds eslint 'error', which in my opinion is super stupid