webpack-storybook-config.js

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],

  webpackFinal: async config => {
    /*
      * Drop babel-loader for `.js|.md` pattern.
      * (It's the first rule in the rules list.)
      *
      * It turned out that storybook had a conflict in the babel-loader configuration
      * preset-env didn't set a value of `loose` property for one of plugins,
      * it led to an internal babel error about mismatched `loose` value for another plugin
      *
      * Current solution is to drop babel-loader for .js|.md
      * If you revert it back, make sure this bug is fixed (introduced in babel 7.10.2)
      *
      * Reference https://github.com/babel/babel/issues/11622
    */
    config.module.rules.shift()

    config.module.rules.push({
      test: /\.js$/,
      loader: 'babel-loader',
      options: {
        "presets": ["@babel/react"]
      }
    })

    return config
  }
}