如何重用带有钩子的 React 库

Question

我正在编写自己的库来帮助使用 React 构建表单。

目标是能够在任何 React 应用程序中重用它(从头开始制作，使用create-react-app、nextjs、其他？

我的问题是我无法弄清楚如何重用它。

这是我尝试在另一个项目中重用我的库时遇到的第一个问题：

无效的挂钩调用警告

React 说原因可能是以下之一：

1. 你可能有不匹配的 React 和 React DOM 版本。
2. 你可能违反了钩子规则。
3. 你可能在同一个应用程序中有多个 React 副本。

经过调查，我排除了1.点和2.

我首先使用Parcel来构建我的库，但我需要从捆绑包中排除 React 来解决3.

这就是为什么我切换到Webpack并将React依赖项移动到peerDependencies+devDependencies中。

我尝试了不同的 webpack 配置：

const config: webpack.Configuration = {
...
externals: {
react: 'React'
}
}

--> 这会导致消费应用程序中出现以下错误：

未定义 React

const config: webpack.Configuration = {
...
externals: {
react: {
root: 'React',
amd: 'react',
commonjs: 'react',
commonjs2: 'react',
umd: 'react',
}
}
}

--> 这会导致以下错误：

无法读取未定义的属性"创建上下文">

我尝试使用带有 npm 链接的库，也可以将其发布到 npm 上，但结果是一样的。

重现步骤：

1. 在 react 应用程序中安装@mlaopane/formhook(npm i @mlaopane/formhook或yarn add @mlaopane/formhook)
2. 尝试使用组件，例如

import { Form } from '@mlaopane/formhook'
export default function App() {
return <Form />
}

3. 您应该在控制台中看到错误

感谢您帮助我完成此:)

注意：这是我的第一个问题，请告知是否需要更多信息。

Answer 1

我终于找到了解决方案，灵感来自create-react-library。

看起来Rollup是捆绑React库的更好候选者。

即使我仍然无法在本地链接我的库，也可以在发布时使用。