Question

我试图创建一个供公司实习生使用的react组件库。在我们的gitlab存储库上使用webpack构建它之后，我尝试在项目中使用它进行测试。我添加了对package.json的引用，从库中将一个组件导入了一个组件，并构建了该应用程序。一切正常，但是当我尝试运行该应用程序时，收到了下一个错误：

React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。

这是我的组件库的webpack.config.js代码：

const path = require('path')

module.exports = {
    entry: [
        path.resolve(__dirname, 'src/index.js'),
        'react-hot-loader/patch',
        'whatwg-fetch'
    ],
    output: {
        path: path.resolve(__dirname, './build/lib'),
        filename: 'index.js',
        library: '',
        libraryTarget: 'commonjs'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env', '@babel/react']
                }
            },
            {
                test: /\.scss$/,
                use: ['css-loader', 'resolve-url-loader', 'sass- 
                loader']
            }
        ]
    }
}

在package.json中，我有：

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-dev": "NODE_ENV=development webpack --mode=development",
"build": "npm install && NODE_ENV=production webpack --mode=production",
"dev": "NODE_ENV=development webpack-dev-server --hot --mode=development --progress"
},

我使用npm run build来发布库。

我的组件之一如下：

import PropTypes from 'prop-types';
import React, { Component } from 'react';
...

class Button extends Component {
...

render() {
    return (
        <button
            className={cx('defaultButton', size, skin, textAlign, { disabled, readOnly }, className)}
            onClick={this.onClickHandler}
            onMouseDown={this.props.onMouseDown}
            style={buttonStyles}
            type={type}
        >
            {children}
            {premiumBadge}
        </button>
        );
    }
}

Button.propTypes = {
...

}
Button.defaultProps = {
...
};

export default Button;

最后，我的index.js是：

import Button from './components/Button'

export {
    Button
}

在另一个应用程序中，我将对package.json的引用添加为依赖项

"dependencies" : {
...
    "components": "git+https://install:---key---@repo",
...

包出现在node_modules中，但是在运行时，如果我在组件中包含Button，则会出现上述错误。

import { Button } from 'components/build/lib/index';

class Whatever extends Component {
... 
render() {
    const { useOurLogo } = this.props;
    const { logo, saveMessage, displayLoader } = this.state;
    const { errorMessage } = saveMessage;

    return (
        <div className={styles.main}>
            <Button skin="black" />
            <LoaderHover size="none" display={displayLoader} />

不变违规-React.createElement：类型无效-预期为字符串

0 个答案: