如何重用带有钩子的 React 库答案

【问题标题】：How to re-use a React library with hooks如何重用带有钩子的 React 库
【发布时间】：2019-10-16 12:21:55
【问题描述】：

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

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

我的问题是我不知道如何重新使用它。

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

Hook Call 无效警告

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

您的 React 和 React DOM 版本可能不匹配。
您可能违反了钩子规则。
您可能在同一个应用中拥有多个 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',
    }
  }
}

--> 导致以下错误：

无法读取未定义的属性“createContext”

我尝试将我的库与 npm 链接一起使用，并在 npm 上发布它，但结果是一样的。

重现步骤：

在您的 React 应用程序中安装 @mlaopane/formhook（npm i @mlaopane/formhook 或 yarn add @mlaopane/formhook）
尝试使用组件，例如

import { Form } from '@mlaopane/formhook'

export default function App() {
  return <Form />
}

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

谢谢你帮我解决这个问题:)

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

【问题讨论】：

标签： reactjs npm package react-hooks

【解决方案1】：

受create-react-library启发，我终于找到了解决方案。

看起来 Rollup 更适合捆绑 React 库。

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

【讨论】：