自定义钩子工厂在项目中工作，但不是作为 npm 依赖项答案

【问题标题】：Custom hook factory works in project but not as npm dependency自定义钩子工厂在项目中工作，但不是作为 npm 依赖项
【发布时间】：2019-08-26 15:58:43
【问题描述】：

我试图将这个自定义钩子创建工厂函数从应用程序中分解到库中。我将它移到它自己的项目中，确保测试仍然通过，等等。然后在我提交对原始项目的更改之前对其进行测试，我 npm install ../path/to/extracted/library 并更改了原始项目中的导入。只是现在我得到一个无效的钩子调用错误。这是库项目的构建文件：

import React, { createContext, useContext, useReducer } from 'react';

export default () => {
  const StateContext = createContext([{}, (() => { })]);
  const CtxProvider = ({ reducer, children, initialState = {}, }) => {
    const [state, dispatch] = useReducer(reducer, initialState);
    return React.createElement(StateContext.Provider, { value: [state, dispatch] }, children);
  };

  return [
    () => useContext(StateContext),
    CtxProvider,
  ];
};

它是一个工厂，它返回一个带有自定义钩子的元组，该钩子产生一个上下文值和减速器调度函数，以及一个将减速器和初始状态作为道具并提供上下文的提供程序组件。当我像这样通过 npm 导入它时

import customHookFactory from 'extracted-libaray-name';

我收到无效的挂钩调用错误。

当我将完全相同的代码复制粘贴到本地文件中时，如下所示：

import customHookFactory from '../utils/local-file';

我没有得到错误。嗯？我正在使用来自 CRA 的 react-scripts 'start' 进行开发，并且我假设它对我的本地项目文件执行了某些操作，而对 node_modules 没有执行操作，反之亦然，但我不知道是什么。

【问题讨论】：

标签： javascript reactjs create-react-app react-hooks react-scripts

【解决方案1】：

好的，经过一番折腾和阅读suggestions from the React error 之后，我想通了。

我已将 React 和 react-dom 列为我提取的库的依赖项，而不是对等依赖项，因此它们是 react 的不同副本。将提取的库更改为使用 React 作为 peerDependency 并重新安装修复它。

【讨论】：