Adding StorySource with a custom webpack throws eslint errors.

[Aristamo]

In my project I use this plugin. But for presentation purpose I want to use storysource. This throws sadly many many errors into the console due to .eslint rules.

This is due to the custom config I added to the storybook config section. Sadly I see no other way to include this config part into my project.

I tried to include it via the vue.config.js with a chainWebpack, like in the documentation of this plugin.

Sadly I've only found one Issue related to this, but the fix provided doesn't seem to work: #33

Here is what I've done:

Installation Steps

1. Created a project vie vue-cli
   1. Manual config
   2. Use Node Scss as Preprocessor
   3. Lint Standard - Lint on save
   4. Jest for test runner
   5. Dedicated config files
2. Installed plugin via vue add storybook
3. Installed @storybook/addon-storysource
4. Updated Storybook deps vie npx npm-check-updates '/storybook/' -u && npm install
5. Added this config like in the doc: https://www.npmjs.com/package/@storybook/addon-storysource#getting-started

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

Followup

The plugin works 'yaayyyy'

The big BUT:
On my console there is every linting error logged which is in the generated js files. Sometimes Storybook is not useable.

Console Snipet:

WARNING in ./src/stories/index.stories.js
Module Error (from ./node_modules/eslint-loader/index.js):
error: Expected indentation of 0 spaces but found 2 (indent) at src/stories/index.stories.js:2:1:
  1 | 
> 2 |   // @ts-ignore
    | ^
  3 |   var withSourceLoader = require('@storybook/source-loader/preview').withSource;
  4 |   // @ts-ignore
  5 |   var __SOURCE_PREFIX__ = "/Users/aburgmaier/Documents/Projects/tmp/storybook-with-storysource/src/stories";

...

error: Newline required at end of file but not found (eol-last) at src/stories/index.stories.js:43:3:
  41 |   }))
  42 |
> 43 |
     |   ^


172 errors found.
172 errors potentially fixable with the `--fix` option.
 @ ./src/stories sync .stories.js$ ./index.stories.js
 @ ./config/storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./config/storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Condition to reproduce

I made minimal setup: https://github.com/Aristamo/storybook-with-storysource

It happens sometimes that npm run storybook:serve doesn't give the output. To reproduce the error make some changes in the src/stories/index.stories.js.

General Question

How do I configure storybook plugins which need some webpack customisation, while the vue webpack.config.js is shared through the plugin?

Thank you for your help 😄

[Aristamo]

Found a Solution:
Instead of config.module.rules.push(...) you have to use config.module.rules.unshift(...) this prevents the errors.