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.

Rancid

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.

Surcease

it worked for me, I have added it to .storybook/main.js look at this link: storybook.js.org/docs/configurations/custom-webpack-config/… – Undercool

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
      }),
    }
  },
}

P.S. 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

Altorelievo

What will be the cli parameter? Can't find it in the PR or npx start-storybook --help. – Mudslinging

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'),
        );
      }),
    },
  },
};

Gladiator

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;
+           }),
+       };
+   },
 };

Haddock

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

Convulsant

Removing this preset makes the build fail altogether (ModuleParseError). With the preset still in place, the build completes albeit no stories work after opening the browser. – Mudslinging

Answer 6

You can add DISABLE_ESLINT_PLUGIN=true option in npm scripts to start storybook. The following npm scripts disable eslint-loader of storybook's webpack.

"storybook": "DISABLE_ESLINT_PLUGIN=true start-storybook -p 6006 -s public ",

Unpolitic

Do you have any documentation to back this up? I have tried this and it did not work. Googling this approach did not returns any results either. – Rewire

Seem to work for me. I use it as follows: "start:storybook": "env DISABLE_ESLINT_PLUGIN=true start-storybook -p 6006 -s public" Note env before setting env variable – Surah