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.

Storysource is giving me linting errors

See original GitHub issue

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;

Issue Analytics

State:
Created 4 years ago
Reactions:6
Comments:19 (5 by maintainers)

Top GitHub Comments

49reactions

psarandocommented, Jun 7, 2019

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.

15reactions

djgrantcommented, Jun 5, 2019

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>
));