反应-无效的挂钩调用。挂钩只能在功能组件的主体内部调用

Question

我创建了一个react模块，然后使用create-react-app创建了一个react应用 当我运行该应用程序时，在浏览器中出现以下错误：

无效的挂钩调用。挂钩只能在函数组件的主体内部调用。

使用chrome开发工具检查我的应用程序时，我注意到了问题的证据：webpack / babel在浏览器中加载了模块的node_modules，因此有2个版本的react（和任何peerDependencies）：

是否可以告诉我的应用排除任何模块的node_modules文件夹？

感谢您的帮助。

Answer 1

我按照here中提到的方法使用react-app-rewired和custom-cra修复了这个问题。

您可以在此处找到示例项目：https://github.com/dwjohnston/material-ui-hooks-issue/tree/master

我认为这对于遇到相同问题的其他人很有用。

Ciao

Answer 2

如果有人偶然发现此错误，而标准解决方案均无济于事，那么您的情况可能与我刚刚遇到的情况相同。

我的代码试图从一个未安装的包（在我的例子中为 @material-ui）导入一个钩子。我收到了上述错误，而不是警告我该软件包未安装。

代码示例：

import { makeStyles } from "@material-ui/core/styles"
const useStyles = makeStyles({
   ...
});
function MyComponent() {
   const classes = useStyles();
}