2

所以我正在为我正在制作的一个新项目构建一些组件存根。要查看这些组件的视觉效果，我正在使用 Storybook。我有两个单独的 webpack 配置，用于 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

我的 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

组件/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 的 webpack 配置存在问题的原因，因为当我不在 Storybook 中查看容器/组件组合时，它可以工作。

任何建议/帮助将不胜感激，谢谢:)

4

0 回答 0