我正在写一个打算开源的react组件。 为此，我将此组件放在存储库中，并用babel进行转换。我在这里使用钩子。

该组件的一小部分摘录为：

import React,{ useRef } from "react";

const MyComponent = props => {
  const index = useRef(0);

  // ...

  return (
    <RenderStuff />
  );
};

export default MyComponent;

我通过babel将该.babelrc转换为该

{
    "presets": ["@babel/preset-react","@babel/preset-env"]
}

当我尝试在示例create-react-app项目中使用该组件时，出现错误：

  

错误：无效的挂接调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：
  1.您的React和渲染器版本可能不匹配（例如React DOM）
  2.您可能违反了《钩子规则》
  3.您可能在同一应用程序中拥有多个React副本
  有关如何调试和解决此问题的提示，请参见https://reactjs.org/warnings/invalid-hook-call-warning.html。

我已全部检查，只有react和react-dom作为组件的peerDependency，并且在示例项目中运行npm ls react react-dom时，我只有一个版本。 我非常有信心，组件内部的钩子并不是真正的问题，在将该组件包含在示例项目中并在那里工作之前，唯一的区别是现在我将其包含在自己的项目中。

当我删除所有内容并只编写一个呈现标题hello世界的函数组件时，我可以使用它，所以我认为原因是挂钩。

转译后的代码如下：

var MyComponent = function MyCompontn(_ref) {
  var index = (0,_react.useRef)(0);
  // ...
 }

错误在那里吗？ 我有什么解决方案？