将多个组件导出为NPM包使用

Question

button.js

import React, { Component } from "react";

class ButtonElements extends Component {
  render() {
    return (
      <button type={this.props.btnType} onClick={this.props.click}>
        {this.props.btnText}
      </button>
    );
  }
}

export default ButtonElements;

text.js

import React from "react";

const TextElement = props => <h2>{props.label}</h2>;

export default TextElement;

index.js

import ButtonElements from "./component/button/button";
import TextElement from "./component/text/text";

export { ButtonElements, TextElement };

webpack.config.js

module.exports = {
  mode: "production",
  entry: ["./src/index.js"],
  output: {
    path: path.resolve("lib"),
    filename: "index.js",
    libraryTarget: "commonjs2"
}

我的项目：

import ButtonElements from "npm-package";
import TextElement from "npm-package";

<ButtonElements iClass="faSort" btnText="T"></ButtonElements>
<TextElement label="T"></TextElement>

错误:元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认和命名为imports

Answer 1

import { ButtonElements } from "npm-package";