Storybook: Storysource is giving me linting errors

[jimmy-e]

When I try and run storybook with storysource, I get a bunch of linting errors. Am I not properly adding babel or es-lint to my storybook webpack build? Thanks.

error messages:

jemery:buttons/ (feature-FP-862-integrate-storybook✗) $ yarn storybook                                                                                                             [17:16:14]
yarn run v1.9.4
$ start-storybook
info @storybook/react v5.0.11
info 
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Loading custom webpack config (extending mode).
info => Using base config because react-scripts is not installed.
 10% building 1/1 modules 0 active(node:4323) DeprecationWarning: Extend-mode configuration is deprecated, please use full-control mode instead.

See https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode                                                                   webpack built ba071bc4a80c5796eaa4 in 6219ms                                                                            
⚠ ｢wdm｣: Hash: ba071bc4a80c5796eaa4
Version: webpack 4.32.2
Time: 6219ms
Built at: 06/04/2019 5:16:24 PM
                                          Asset      Size        Chunks                    Chunk Names
                                    iframe.html  2.52 KiB                [emitted]         
            main.ba071bc4a80c5796eaa4.bundle.js  16.2 KiB          main  [emitted]         main
        main.ba071bc4a80c5796eaa4.bundle.js.map  3.21 KiB          main  [emitted]         main
    runtime~main.ba071bc4a80c5796eaa4.bundle.js    31 KiB  runtime~main  [emitted]         runtime~main
runtime~main.ba071bc4a80c5796eaa4.bundle.js.map  32.1 KiB  runtime~main  [emitted]         runtime~main
    vendors~main.ba071bc4a80c5796eaa4.bundle.js  1.95 MiB  vendors~main  [emitted]  [big]  vendors~main
vendors~main.ba071bc4a80c5796eaa4.bundle.js.map  2.07 MiB  vendors~main  [emitted]         vendors~main
Entrypoint main [big] = runtime~main.ba071bc4a80c5796eaa4.bundle.js runtime~main.ba071bc4a80c5796eaa4.bundle.js.map vendors~main.ba071bc4a80c5796eaa4.bundle.js vendors~main.ba071bc4a80c5796eaa4.bundle.js.map main.ba071bc4a80c5796eaa4.bundle.js main.ba071bc4a80c5796eaa4.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true 64 bytes {main} [built]
[./.storybook/config.js] 583 bytes {main} [built]
[./node_modules/@storybook/addon-knobs/dist/index.js] 4.9 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 114 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/client/index.js] 1.27 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/fn/symbol/index.js] 240 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/react/index.js] 190 bytes {vendors~main} [built]
[./node_modules/regenerator-runtime/runtime.js] 23 KiB {vendors~main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true] (webpack)-hot-middleware/client.js?reload=true 7.68 KiB {vendors~main} [built]
    + 372 hidden modules

WARNING in ./src/app/components/shared/buttons/sampleButton.stories.js
Module build failed (from ./node_modules/eslint-loader/index.js):
Module failed because of a eslint error.

/Users/jemery/dev/bei-bei/src/app/components/shared/buttons/sampleButton.stories.js
   2:1    error  Expected indentation of 0 spaces but found 2                                         indent
   2:3    error  Expected 1 empty line after require statement not followed by another require        import/newline-after-import
   2:10   error  Exporting mutable 'var' binding, use 'const' instead                                 import/no-mutable-exports
   2:10   error  Unexpected var, use let or const instead                                             no-var
   2:14   error  Use object destructuring                                                             prefer-destructuring
   2:32   error  Unexpected require()                                                                 global-require
   2:32   error  `@storybook/addon-storysource` import should occur after import of `./sampleButton`  import/order
   3:1    error  Expected indentation of 0 spaces but found 2                                         indent
   3:10   error  Exporting mutable 'var' binding, use 'const' instead                                 import/no-mutable-exports
   3:10   error  Unexpected var, use let or const instead                                             no-var
   3:14   error  Unexpected dangling '_' in '__STORY__'                                               no-underscore-dangle
   4:1    error  Expected indentation of 0 spaces but found 2                                         indent
   4:10   error  Exporting mutable 'var' binding, use 'const' instead                                 import/no-mutable-exports
   4:10   error  Unexpected var, use let or const instead                                             no-var
   4:14   error  Unexpected dangling '_' in '__ADDS_MAP__'                                            no-underscore-dangle
   4:29   error  A space is required after '{'                                                        object-curly-spacing
   4:30   error  Strings must use singlequote                                                         quotes
   4:55   error  Missing space before value for key 'buttons--sample-button'                          key-spacing
   4:55   error  A space is required after '{'                                                        object-curly-spacing
   4:56   error  Unnecessarily quoted property 'startLoc' found                                       quote-props
   4:56   error  Strings must use singlequote                                                         quotes
   4:67   error  Missing space before value for key 'startLoc'                                        key-spacing
   4:67   error  A space is required after '{'                                                        object-curly-spacing
   4:68   error  Unnecessarily quoted property 'col' found                                            quote-props
   4:68   error  Strings must use singlequote                                                         quotes
   4:74   error  Missing space before value for key 'col'                                             key-spacing
   4:76   error  A space is required after ','                                                        comma-spacing
   4:77   error  Unnecessarily quoted property 'line' found                                           quote-props
   4:77   error  Strings must use singlequote                                                         quotes
   4:84   error  Missing space before value for key 'line'                                            key-spacing
   4:85   error  A space is required before '}'                                                       object-curly-spacing
   4:86   error  A space is required after ','                                                        comma-spacing
   4:87   error  Unnecessarily quoted property 'endLoc' found                                         quote-props
   4:87   error  Strings must use singlequote                                                         quotes
   4:96   error  Missing space before value for key 'endLoc'                                          key-spacing
   4:96   error  A space is required after '{'                                                        object-curly-spacing
   4:97   error  Unnecessarily quoted property 'col' found                                            quote-props
   4:97   error  Strings must use singlequote                                                         quotes
   4:103  error  Missing space before value for key 'col'                                             key-spacing
   4:104  error  A space is required after ','                                                        comma-spacing
   4:105  error  Unnecessarily quoted property 'line' found                                           quote-props
   4:105  error  Strings must use singlequote                                                         quotes
   4:112  error  Missing space before value for key 'line'                                            key-spacing
   4:113  error  A space is required before '}'                                                       object-curly-spacing
   4:114  error  A space is required before '}'                                                       object-curly-spacing
   4:115  error  A space is required before '}'                                                       object-curly-spacing
   5:1    error  Trailing spaces not allowed                                                          no-trailing-spaces
   6:1    error  Expected indentation of 0 spaces but found 2                                         indent
   6:3    error  Import in body of module; reorder to top                                             import/first
   7:1    error  Import in body of module; reorder to top                                             import/first
   8:1    error  Import in body of module; reorder to top                                             import/first
   9:1    error  Import in body of module; reorder to top                                             import/first
  10:1    error  Import in body of module; reorder to top                                             import/first
  20:1    error  Too many blank lines at the end of file. Max of 0 allowed                            no-multiple-empty-lines
  21:1    error  Trailing spaces not allowed                                                          no-trailing-spaces
  21:3    error  Newline required at end of file but not found                                        eol-last

✖ 56 problems (56 errors, 0 warnings)
  47 errors and 0 warnings potentially fixable with the `--fix` option.

 @ ./src/app/components sync \.stories\.js$ ./shared/buttons/sampleButton.stories.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true
Child HtmlWebpackCompiler:
                          Asset     Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  558 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 1.69 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {HtmlWebpackPlugin_0} [built]
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 5.0.11 started                          │
│   7.36 s for manager and 6.84 s for preview         │
│                                                     │
│   Local:            http://localhost:51967/         │
│   On your network:  http://192.168.50.164:51967/    │
│                                                     │
╰─────────────────────────────────────────────────────╯

File structure:

src/
  |- app/
    |- components/
      |- shared/
        |- buttons/
          |- sampleButton.js
          |- sampleButton.stories.js
.storybook/
  |- addons.js
  |- config.js
  |- webpack.config.js
webpack.common.js  

sampleButton.js:

import React from 'react';

const SampleButton = ({ disabled, onClick, title }) => (
  <button
    disabled={disabled}
    onClick={onClick}
    type="button"
  >
    {title}
  </button>
);

export default SampleButton;

sampleButton.stories.js:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { text, boolean } from '@storybook/addon-knobs';
import SampleButton from './sampleButton';

storiesOf('Buttons', module)
  .add('Sample Button', () => (
    <SampleButton
      disabled={boolean('Disabled', false)}
      onClick={action('clicked')}
      title={text('Title', 'button')}
    />
  ));

webpack.common.js:

const path = require('path');

const SRC_DIR = path.resolve(__dirname, 'src');

const config = {
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          failOnWarning: false,
          failOnError: true,
        },
      },
      {
        test: /\.js$/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'stage-2'],
        },
      },
    ],
  },
};

module.exports = config;

addons.js:

import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-storysource/register';

config.js:

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';

addDecorator(withKnobs);

const req = require.context('../src/app/components', true, /\.stories\.js$/);

const loadStories = () => {
  req.keys().forEach(filename => req(filename));
};

configure(loadStories, module);

webpack.config.js:

const merge = require('webpack-merge');
const common = require('../webpack.common.js');

const config = merge(common, {
  module: {
    rules: [
      {
        test: /\.stories\.js?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre',
      },
    ],
  },
});

module.exports = config;

[libetl]

I don't believe it can be linked to prettier in storysource.

[libetl]

But the webpack common js uses eslint-loader as a rule

[djgrant]

I am also seeing this error. The add-on loads fine initially but triggers errors when I save a file.

ERROR in ./src/components/atoms/container.stories.tsx
Module Error (from ./node_modules/eslint-loader/index.js):

  Line 4:1:  Import in body of module; reorder to top  import/first
  Line 5:1:  Import in body of module; reorder to top  import/first
  Line 6:1:  Import in body of module; reorder to top  import/first

.storybook/webpack.config.js

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.stories\.tsx?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: { parser: 'typescript' },
      },
    ],
    enforce: 'pre',
  });

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ],
  });

  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

src/components/atoms/container.stories.tsx

import React from 'react';
import { storiesOf } from '@storybook/react';
import Container from './container';

storiesOf('Container', module).add('default', () => (
  <Container>
    <p>Hello</p>
  </Container>
));

[sjsingh85]

Same here

[Elecweb]

Any workaround??

[libetl]

I believe you should make the eslint-loader failsafe for the moment in the webpack.common.js file.

const path = require('path');

const SRC_DIR = path.resolve(__dirname, 'src');

const config = {
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          failOnWarning: false,
          failOnError: false, // false instead of true
        },
      },
      {
        test: /\.js$/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'stage-2'],
        },
      },
    ],
  },
};

module.exports = config;

[libetl]

however I don't know where this webpack config comes from. Is it a preset ? or custom config ?

[psarando]

I ran into this same Import in body of module; reorder to top import/first error in SB 5.0.x.

I got rid of those linting errors by using config.module.rules.unshift in .storybook/webpack.config.js, instead of rules.push:

const path = require("path");

module.exports = async ({ config }) => {
    config.module.rules.unshift({
        test: /\.jsx?$/,
        include: path.resolve(__dirname, "../src/examples"),
        loaders: [
            {
                loader: require.resolve("@storybook/addon-storysource/loader"),
                options: {
                    prettierConfig: {
                        tabWidth: 4,
                        trailingComma: "es5",
                    },
                },
            },
        ],
        enforce: "pre",
    });

    return config;
};

This fix still works for me in SB v5.1.3.

[LeBenLeBen]

I got a similar issue caused by the Storysource addon Prettier's default config which is documented here.

The main issue for me is printWidth: 100 which is different from Prettier's default and my own config. I ended-up overriding the addon settings with my own to stop the warning from popping in the console when running Storybook.

storybook/webpack.config.js

const prettierConfig = require('../prettier.config.js');

module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: {
          prettierConfig,
        },
      },
    ],
    enforce: 'pre',
  });

  return config;
};

prettier.config.js

module.exports = {
  printWidth: 80, // Enforce 80 whereas it's Prettier default to override Storysource settings
  singleQuote: true,
  trailingComma: 'es5',
};

I think the addon should not define a custom Prettier config if it finds a Prettier config in the current/upper directories of the project.

[stearruda]

Thank you @psarando! You saved my life. :smile:
Your fix of changing to unshift worked for me.

[duhseekoh]

This error now happens with addon-docs since it includes storysource.

[pitops]

Guys this error still happening even with the fix mentioned above. Also using addon-docs and i was able to track it down to addon-docs

[peduarte]

Same here, changing to unshift worked for me.

[ivanmomchilov9]

Hi there!

I have fixed this error which basically appears only if I make some changes in the components or in the component's stories.

Module Error (from ./node_modules/eslint-loader/index.js):

  Line 4:1:  Import in body of module; reorder to top  import/first
  Line 5:1:  Import in body of module; reorder to top  import/first
  Line 6:1:  Import in body of module; reorder to top  import/first

My webpack.config.js in .storybook looked like this (The way it's show in the exmaple of the sourceloader docs)

module.exports = function({ config }) {
  config.module.rules.push({
    enforce: 'pre',
    test: /\.stories\.js?$/,
    loaders: [require.resolve('@storybook/source-loader')],
  });

  return config;
};

However I just removed the

enforce: 'pre'

And now it works just totally fine after changes.

[pitops]

module.exports = function({ config }) {
config.module.rules.push({
enforce: 'pre',
test: /.stories.js?$/,
loaders: [require.resolve('@storybook/source-loader')],
});

return config;
};

Not working in my case. I should note that i am note using storysource addon now but the addon-docs itself, which uses source-loader underneath?

[duhseekoh]

I get this error out of the box with the create-react-app preset + addon-docs and no further custom configuration.

If you inspect the story files, you'll see that storybook adds a bunch of framework specific vars to the top of each file, then the linter runs from storysource and picks up on those being in thev file on top of your imports.

You can set sourceLoaderOptions in the addon-docs preset to null to turn storysource off entirely.

[shuenw]

[edit] I have this problem as well, and after removing storysource from the imports and also the commenting out the web pack.config.js file, the problem goes away.

Guess I'll omit storysource for now until there's a fix...

[ljsherlock]

Hey guys.

First I want to thank @jimmy-e for opening this issue and everyone else subsequently adding to it as I wouldn't have figure out my particular situation related to this.

Although I'm not using Storysource, this issue helped and I think this solution is related. For context: I was simply trying to build my tsx-based storybook library.

I hope this helps someone else with a similar issue.

I started off following some of the advise above (adding the eslint options to webpack.config.js). This didn't work for me (although I'm already using a custom webpack.config for adding fonts).

I discovered that you can directly edit the main webpack.config by using .storybook/main.js with a similar use of the origin config param and pushing changes to it. However, pushing did not work in my case. I believe this is because the both needed to come before the babel-loader __and__ override the original.

So I overrided the specific rule by referencing the key...

config.module.rules[8] = {

Full main.js below.

Note: Please don't take the options as exactly what is required to suppress these errors. I simply move onto what I actually needed to do after I fixed the issue; It could be one, or all of the options (feel free to find out which).

const path = require('path')

module.exports = {
  webpackFinal: async (config, { configType }) => {

    // remove after debugging
    console.log('before ',config.module.rules)

    config.module.rules[8] = {
      include: path.resolve(__dirname, "../src"),
      test: /\.tsx$/,
      enforce: 'pre',
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        quiet: true,
        emitError: false,
        emitWarning: false,
        failOnWarning: false,
        failOnError: false, 
      },
    };

    // remove after debugging
    console.log('after ',config.module.rules)

    return config;
  }
}