Default export works on the development site, but returns undefined in Storybook

Question

So I'm building some component stubs for a new project I'm making. To see the visuals for these components I'm using Storybook. I have two separate webpack configs for the Storybook build and the regular build. Both inherit from a base config, shown below (I've removed some irrelevant loaders to make reading easier):

const path = require('path')

const config = {
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'public/js')
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react'],
          plugins: [
            'transform-object-rest-spread',
            'transform-es2015-destructuring',
            ["react-css-modules", {
              "filetypes": {
                ".scss": {
                  "syntax": "postcss-scss",
                  "plugins": ["postcss-nested"]
                }
              },
              "generateScopedName": "[local]_[hash:base64:5]"
            }]
          ]
        }
      }
    ]
  },

  resolve: {
    modules: ['node_modules', path.join(__dirname, 'resources/assets/js')],
  }
}

module.exports = config

My Storybook config and my regular config differ like this:

Webpack.config.js

const path = require('path')
const webpack = require('webpack')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const webpackBaseConfig = require(path.join(__dirname, 'webpack.base.config.js'))

const plugins = [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: Infinity,
  }),
]

if(process.env.NODE_ENV === 'production') {
  plugins.push(new UglifyJSPlugin())
}

const webpackConfig = Object.assign(webpackBaseConfig, {
  entry: {
    vendor: ['react', 'react-dom', 'react-redux', 'react-router', 'react-router-dom', 'redux-form', 'axios', 'redux'],
    app: path.join(__dirname, 'resources/assets/js/app.jsx'),
  },

  plugins,
})

module.exports = webpackBaseConfig

Webpack.storybook.config.js

const path = require('path')
const webpackBaseConfig = require(path.join(__dirname, '../webpack.base.config.js'))

const storyBookConfig = Object.assign(webpackBaseConfig, {
  entry: path.join(__dirname, '../resources/assets/js/app.jsx'),
})

module.exports = storyBookConfig

Now everything works fine when I use the normal build, but when I visit storybook these components seems to break it:

components/AppHeader/AppHeader.component.jsx

import React from 'react'

import { Logo, UserCard } from 'components'

import './AppHeader.scss'

const AppHeader = (props) => {
  const { user } = props

  return (<div styleName="app-header">
    <Logo />
    <span styleName="user-profile">
      <UserCard firstName={user.firstName} lastName={user.lastName} />
    </span>
  </div>)
}

export default AppHeader

components/AppHeader/AppHeader.container.jsx

import { connect } from 'react-redux'

import AppHeader from './AppHeader.component.jsx'

const mapStateToProps = (state) => ({
  user: state.currentUser,
})

export default connect(
  mapStateToProps
)(AppHeader)

The error I get is when exporting the connected component in AppHeader.container.jsx:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

So it seems as if the default export in AppHeader.component.jsx is undefined? This is what makes me think that it's a problem with the webpack configuration for Storybook, because the container/component combo works when I view it not in Storybook.

Any suggestions/help would be greatly appreciated, thank you :)