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.