Javascript 默认导出在开发站点上工作，但在Storybook中返回未定义的

所以我正在为我正在做的一个新项目构建一些组件存根。为了查看这些组件的视觉效果，我使用了Storybook。我有两个独立的网页配置，分别用于故事书构建和常规构建。两者都继承自一个基本配置，如下所示（为了便于阅读，我删除了一些不相关的加载程序）：

我的故事书配置和常规配置的区别如下：

Webpack.config.js

Webpack.storybook.config.js

现在，当我使用普通构建时，一切正常，但当我访问故事书时，这些组件似乎破坏了它：

components/AppHeader/AppHeader.component.jsx

我得到的错误是在AppHeader.container.jsx中导出连接的组件时：

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件

那么，AppHeader.component.jsx中的默认导出似乎是未定义的？这就是为什么我认为这是Storybook的webpack配置的问题，因为容器/组件组合在我不在Storybook中查看时起作用

---

如果您有任何建议/帮助，我们将不胜感激，谢谢：）

很抱歉发布此帖子-如果有人遇到同样的问题，storybook不支持默认导出。您应该为故事书使用命名导出。请记住，您可以将一个组件导出为命名和默认值：）

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

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

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

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

import { connect } from 'react-redux'

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

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

export default connect(
  mapStateToProps
)(AppHeader)