Storysource Webpack rule causing build errors in Design Systems for Developers [REACT]

Description

When I followed the instructions for adding webpack.config.js into .storybook, which pushes the loader rule for addon-storybook, it caused the build to error in every .stories file with the error Import in body of module; reorder to top import/first.

After researching the issue, I found that this comment seems to solve the problem: https://github.com/storybookjs/storybook/issues/6974#issuecomment-499903328

Proposed Change

Original:

//And update your webpack config in .storybook/webpack.config.js:

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

 return config;
`};

Fixed:

//And update your webpack config in .storybook/webpack.config.js:

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

 return config;
`};

[domyen]

thanks @jpmarra (just invited you to collaborate too)

[tmeasday]

Seems to work! Thanks so much @jpmarra, this was something that had bugged me a bit.