javascript - デフォルトのエクスポートは開発サイトでは機能しますが、Storybook では未定義を返します

Question

そこで、作成中の新しいプロジェクト用にいくつかのコンポーネント スタブを作成しています。これらのコンポーネントのビジュアルを見るために、私は Storybook を使用しています。Storybook ビルドと通常のビルド用に 2 つの個別の webpack 構成があります。両方とも、以下に示す基本構成から継承します (読みやすくするために、無関係なローダーをいくつか削除しました)。

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

私の Storybook 構成と通常の構成は次のように異なります。

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

現在、通常のビルドを使用するとすべて正常に動作しますが、ストーリーブックにアクセスすると、これらのコンポーネントが壊れているようです:

コンポーネント/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)

AppHeader.container.jsx で接続されたコンポーネントをエクスポートするときに発生するエラー:

要素の型が無効です: 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、取得したのは未定義です。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れている可能性があります。

AppHeader.component.jsx のデフォルトのエクスポートが定義されていないように見えますか? これが、Storybook 以外で表示したときにコンテナー/コンポーネントのコンボが機能するため、Storybook の webpack 構成に問題があると思わせる理由です。

どんな提案/助けも大歓迎です、ありがとう:)