Storybook: Subsequent saves with eslint enabled through Webpack config throw errors

[zslabs]

Describe the bug

Related PR

I'm thinking the aforementioned PR may be causing an issue when eslint is integrated into the webpack config and part of the reloading:

// main.js

const webpack = require('webpack');

module.exports = {
  stories: ['../src/components/*.stories.(js|mdx)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-knobs',
    '@storybook/addon-actions',
    '@storybook/addon-viewport',
    '@storybook/addon-a11y',
  ],
  webpackFinal: async config => {
    // Provide React by default (since we don't need it with Emotion)
    config.plugins.push(
      new webpack.ProvidePlugin({
        React: 'react',
      })
    );

    config.module.rules[0].use[0].options.presets = [
      require.resolve('@babel/preset-react'),
      require.resolve('@babel/preset-env'),
      // Emotion preset must run BEFORE reacts preset to properly convert css-prop.
      // Babel preset-ordering runs reversed (from last to first). Emotion has to be after React preset.
      require.resolve('@emotion/babel-preset-css-prop'),
    ];

    // Enable eslint
    config.module.rules.push({
      test: /\.jsx?$/,
      exclude: /(node_modules|cache)/,
      use: [
        {
          loader: 'eslint-loader',
        },
      ],
    });

    config.node = {
      module: 'empty',
      dgram: 'empty',
      dns: 'mock',
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
      child_process: 'empty',
    };

    // Return the altered config
    return config;
  },
};

The initial build works fine, but saves after error out with Prettier errors I can't actually fix; potentially something to do with the Docs source-loader?. This worked fine in 5.3.1, but everything after has this issue.

To Reproduce

You can find the complete repo at https://github.com/gremlin/chaoskit/tree/feature/emotion If you download, and run yarn develop, saves to *.stories.js work properly, but if you upgrade all the Storybook deps to the latest, subsequent saves to those stories will throw the error.

Expected behavior
eslint should not throw errors within stories.

[serusko]

same problem,
mine main.config.js (I am using CRA + vscode, prettier with 'formatOnSave')

it was ok until I replaced addon-info with addon-docs

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    {
      name: '@storybook/preset-create-react-app',
      options: {
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
        },
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, '../tsconfig.json'),
        },
        craOverrides: {},
      },
    },
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-knobs/register',
    '@storybook/addon-docs',
  ],
};

[shilman]

As a temporary workaround you can disable the source-loader:

    {
      name: '@storybook/addon-docs',
      options: {
        sourceLoaderOptions: null,
      },
    },

Also, I think this might be fixed with the new source loader available in 6.0-alpha, have you tried that?

[serusko]

@shamin both working (temp fix with option and also alpha version), so I am using alpha for testing :)
ty and GJ!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Closing this for now

[zslabs]

👋 Just a follow-up with SB 6.0, the workaround in https://github.com/storybookjs/storybook/issues/9809#issuecomment-593680118 does work, but at the expense of losing out on the snippets. Is there a recommended include/exclude config for enabling eslint within Storybook? That'd be a super useful addition to the docs.

[shilman]

But it still gives the error in 6.0.x if you don't use the workaround?

[zslabs]

@shilman Appreciate the reply! It was indeed still giving me the error, but adding enforce: 'pre' fixed it! Here's an example for anyone that comes across this in the future:

config.module.rules.push({
  test: /\.jsx?$/,
  exclude: /(node_modules|cache)/,
  use: [
    {
      loader: 'eslint-loader',
    },
  ],
  enforce: 'pre',
})

Thanks again!