元素类型无效：在 webpack 构建后应为字符串（对于内置组件）或 class/function

Question

我创建了一个简单的组件库和 Storybook 作为游乐场，使用 Lerna bootstrap 作为符号链接。

当我使用符号链接并呈现 Button 时，这段代码工作正常：

import React from 'react';
import { Button } from '@ui-core/core';

export default {
    title: 'Button',
    component: Button,
};

export const Emoji = () => (
    <Button text={'dsad1'}>
    </Button>
);

但是在我运行我的 webpack 构建并尝试从 node_modules 获取包之后我得到这个错误，

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, or you might have mixed up default and named imports.

我不明白我的构建过程有什么问题。

webpack.config.js

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    devtool: 'source-map',
    mode: 'development',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'build/dist'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react"
                        ]
                    }
                }]
            }
        ]
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'package.json'),
                    to: path.resolve(__dirname, 'build'),
                },
            ],
        }),
    ],
};

有人知道我遗漏了什么吗？

Answer 1

找到问题了，我在webpack.configoutput这个属性:

中不见了

libraryTarget: 'umd'

Webpack docs

元素类型无效：在 webpack 构建后应为字符串（对于内置组件）或 class/function

Element type is invalid: expected a string (for built-in components) or a class/function after webpack build

node-modules

reactjs

webpack

lerna

storybook