Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook isn't picking up my .eslintrc in Full Control Mode

See original GitHub issue

Recently I introduced ESLint to my UI library which is managed by Storybook. The build happens independently and I was able to integrate ESLint with it. Thus, every time I build the project, the build will fail in case I get lint errors.

Now I wanted to have the same ESLint configuration in my custom Storybook Webpack setup. I only added the ‘eslint-loader’ to my previous configuration in .storybook/webpack.config.js:

module.exports = ({ config }) => {
  config.module.rules.push(
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader'],
    },
    {
      test: /stories\.(js|jsx)?$/,
      loaders: [require.resolve('@storybook/addon-storysource/loader')],
      enforce: 'pre',
    },
  );

  return config;
};

My desired outcome would be to get the same lint errors as for my library build when I go with npm run storybook. However, I get weird lint errors, even though my library hasn’t any on build. In Storybook Linting it complains about Prettier etc.

                            prettier/prettier
  144:1   error  Delete `⏎··`

                            import/first
   20:1   error  Import in body of module; reorder to top

                            import/first
   12:1   error  Import in body of module; reorder to top

                            import/order
    3:1   error  Replace `··export·var·__STORY__·=` with `export·var·__STORY__·=⏎·`

                            no-underscore-dangle
    4:1   error  Replace `··export·var·__ADDS_MAP__·=·{"5-utils-01-withextendedtoucharea--06-input-field":{"startLoc":{"col":7,"line":115},"endLoc":{"col":3,"line":135}},"5-utils-01-withextendedtoucharea--05-footer-button-secondary":{"startLoc":{"col":7,"line":97},"endLoc":{"col":3,"line":114}},"5-utils-01-withextendedtoucharea--04-footer-button":{"startLoc":{"col":7,"line":79},"endLoc":{"col":3,"line":96}},"5-utils-01-withextendedtoucharea--03-content-button":{"startLoc":{"col":7,"line":61},"endLoc":{"col":3,"line":78}},"5-utils-01-withextendedtoucharea--02-icon-button-with-custom":{"startLoc":{"col":7,"line":39},"endLoc":{"col":3,"line":60}},"5-utils-01-withextendedtoucharea--01-icon-button":{"startLoc":{"col":7,"line":20},"endLoc":{"col":3,"line":38}}` with `export·var·__ADDS_MAP__·=·{⏎··'5-utils-01-withextendedtoucharea--06-input-field':·{⏎····startLoc:·{·col:·7,·line:·115·},⏎····endLoc:·{·col:·3,·line:·135·},⏎··},⏎··'5-utils-01-withextendedtoucharea--05-footer-button-secondary':·{⏎····startLoc:·{·col:·7,·line:·97·},⏎····endLoc:·{·col:·3,·line:·114·},⏎··},⏎··'5-utils-01-withextendedtoucharea--04-footer-button':·{⏎····startLoc:·{·col:·7,·line:·79·},⏎····endLoc:·{·col:·3,·line:·96·},⏎··},⏎··'5-utils-01-withextendedtoucharea--03-content-button':·{⏎····startLoc:·{·col:·7,·line:·61·},⏎····endLoc:·{·col:·3,·line:·78·},⏎··},⏎··'5-utils-01-withextendedtoucharea--02-icon-button-with-custom':·{⏎····startLoc:·{·col:·7,·line:·39·},⏎····endLoc:·{·col:·3,·line:·60·},⏎··},⏎··'5-utils-01-withextendedtoucharea--01-icon-button':·{⏎····startLoc:·{·col:·7,·line:·20·},⏎····endLoc:·{·col:·3,·line:·38·},⏎··},⏎`  prettier/prettier
    4:10  error  Exporting mutable 'var' binding, use 'const' instead

My assumption would be that I am not able to link my Storybooks Linting from .storybook/webpack.config.js to my ESLint files from my project. The following two files are used for my ESLint configuration outside of Storybook.

.eslintrc:

{
  "env": {
    "commonjs": true,
    "node": true,
    "mocha": true
  },
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"]
}

.eslintignore:

.storybook/*
dist/*
lib/*

node_modules/*

**/*.snap.js

Any chance to overcome this problem to align the eslint-loader from my .storybook/webpack.config.js with the eslint-loader from my webpack.config.js from my library? Maybe my assumption is just wrong and it has to do with something internal in Storybook.

For the sake of completeness, my webpack.config.js for my library build:

module.exports = {
  entry: './src/index.js',
  output: {
    path: `${__dirname}/lib`,
    filename: 'bundle.js',
    library: 'treact-ui',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      }
    ],
  },
};