npm 模块上的钩子调用无效

Question

首先链接到 repo：https : //github.com/vmarchesin/react-konami-code

您应该能够构建它（确保取消注释导出src/index.js）并链接到您的项目。也可以尝试使用npm i -S react-konami-code@2.0.0-beta.0并获取钩子的错误。我取下了钩子，2.0.0-beta.1因为它坏了。

问题描述

我为我的 npm 模块创建了一个自定义钩子，它在发布或用作模块后不起作用。我怀疑问题在于 webpack 如何捆绑它，但我无法解决它。

采取的步骤

• 我确保在我的 webpack 配置中声明react和react-dom作为外部对象。

externals: [
  {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom',
    },
  },
],

• 声明react并react-dom为peerDependencies在package.json

"peerDependencies": {
  "react": "^16.13.1",
  "react-dom": "^16.13.1"
},

• 钩子正在工作。如果我声明并使用它，它就会起作用。如果我从模块中导入它（或使用 npm 链接），则不会。这是钩子的代码：

externals: [
  {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom',
    },
  },
],

• 我不是在类组件中调用钩子。

我正在使用webpack@4.43.0以及babel@7和babel-loader@8.1.0。

这是我导出 webpack 构建的索引文件的方法：

"peerDependencies": {
  "react": "^16.13.1",
  "react-dom": "^16.13.1"
},

这是错误的屏幕截图和记录：

未处理的运行时错误错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用

Answer 1

我在这里看到两个问题，可能会导致您在控制台上看到的错误：

1. 不导入React因此违反了Hooks 规则-仅从 React Functions 调用 Hooks。
2. 另外，问题可能来自于您这里没有命名组件。

所以我会包括React以下内容：

import React, { useEffect, useState, useCallback } from 'react';

您也可以尝试按如下方式导出：

export default function ComponentName (action, {
  code = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
} = {}) {
   // your component code
}

或者，如果您仍想使用箭头功能，则：

const ComponentName = (action, {
  code = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
} = {}) => {
   // your component code
}

export default ComponentName;

可以参考这篇文章：
不要使用匿名函数构造React函数式组件。

我希望这有帮助！