Question

我目前正在构建一个React组件库，并将其与Webpack 4捆绑在一起。

从构建库的捆绑包到将其发布到npm注册表上，一切都很好。

但是，然后，我无法将其任何组件导入其他React应用程序中，并在运行时获取此错误消息：

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

这是相关代码：

我的组件库中的一个哑组件： button/index.js

import React from "react";

const Button = () => <button>Foobar</button>;

export { Button };

我的图书馆index.js的主要入口点：

import { Button } from "./src/components/Button";

export { Button };

我的Webpack配置webpack.config.js：

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./index.js",
  plugins: [new CleanWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
    libraryTarget: "commonjs",
    library: ""
  }
};

最后，将此组件导入另一个应用程序：

import { Button } from "my-design-system";

我想我的Webpack配置中缺少某些内容，或者其中一个属性可能是错误的，但是在阅读了多个帖子和教程之后，我不知道是哪一个。

Answer 1

您要将库导出为commonjs，并尝试通过import/export语法导入。您应该将输出更改为

output: {
  filename: "index.js",
  path: path.resolve(__dirname, "dist"),
  libraryTarget: "umd",
  library: "my-design-system"
}

在这里找到了很多信息：https://webpack.js.org/guides/author-libraries/

Answer 2

我要做的是默认导出您的组件，然后按照index.js中的名称重新导出：

/// Button.js
import React from "react";

const Button = () => <button>Foobar</button>;

export default Button ;

// index.js
export { default as Button } from "./src/components/Button";

那你就可以做

import { Button } from "my-design-system";

还要确保在设计系统的main中设置了指向index.js的{{1}}

此外，如果您仍想在某些组件中命名导出，则可以从该组件文件中导出所有内容：

package.json

无论哪种方式，您都将确保所有组件始终有一个导出点。

编辑：正如Maaz Syed Adeeb所指出的那样，您的配置//index.js export * from "./src/components/ComponentWithNamedExports";错误。我将从那里删除libraryTarget和libraryTarget。

使用Webpack 4构建React组件库

2 个答案: