javascript - 使用 Webpack 4 构建 React 组件库
问题描述
我目前正在构建一个 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 配置中遗漏了一些东西,或者其中一个属性可能是错误的,但是在阅读了多篇文章和教程之后,我不知道是哪一个。
解决方案
您正在将库导出为commonjs
并尝试通过import/export
语法导入它。您应该将输出更改为
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
libraryTarget: "umd",
library: "my-design-system"
}
推荐阅读
- elasticsearch - 我们可以将一个查询的结果用作弹性搜索中另一个查询的输入吗?
- swift - Swift:addSubview 放在前一个视图上
- forms - 来自 Laravel 作曲家的评论表
- power-automate - 流 - 在 SharePoint(电子表格)中创建文件时,获取行并将它们粘贴到主电子表格中
- powershell - VSTS CI 将镜像推送到 Linux 远程服务器
- javascript - 静音自动播放视频显示错误:play() 失败,因为用户没有先与文档交互。
- wyam - Wyam - 我如何在管道中订购内容?
- angular - 如何将带有 .NET Core 2.0 Web API 应用程序的 Angular 6 部署到 Microsoft Azure?
- typescript - Jasmine 测试资源管理器未在 Visual Studio 代码中的 jasmine 测试资源管理器中显示测试用例(它阻止)列表
- matplotlib - 如何获得与多变量函数中的两个变量相对应的二维图?