Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Subsequent saves with eslint enabled through Webpack config throw errors #9809

Closed
zslabs opened this issue Feb 10, 2020 · 8 comments
Closed

Comments

@zslabs
Copy link

zslabs commented Feb 10, 2020

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.

@shilman shilman added this to the 5.3.x milestone Feb 10, 2020
@shilman shilman self-assigned this Feb 10, 2020
@serusko
Copy link

serusko commented Mar 1, 2020

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
Copy link
Member

shilman commented Mar 2, 2020

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
Copy link

serusko commented Mar 3, 2020

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

@stale
Copy link

stale bot commented Mar 24, 2020

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!

@stale stale bot added the inactive label Mar 24, 2020
@shilman
Copy link
Member

shilman commented Mar 24, 2020

Closing this for now

@shilman shilman closed this as completed Mar 24, 2020
@zslabs
Copy link
Author

zslabs commented Aug 14, 2020

👋 Just a follow-up with SB 6.0, the workaround in #9809 (comment) 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
Copy link
Member

shilman commented Aug 15, 2020

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

@zslabs
Copy link
Author

zslabs commented Aug 15, 2020

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants