“无效的钩子调用。只能在函数组件的主体内部调用钩子。”组件库链接到主 React 应用程序时出错 [关闭]

Posted 2023-02-22

【中文标题】“无效的钩子调用。只能在函数组件的主体内部调用钩子。”组件库链接到主 React 应用程序时出错 [关闭]

【英文标题】："Invalid hook call. Hooks can only be called inside of the body of a function component." error when component library linked to main React app [closed]

【发布时间】：2022-01-19 02:13:40

【问题描述】：

当你有一个 React 组件库并且你有一个 React 应用程序时，你通常在你的开发机器中使用 npm link 或 yarn link 在本地将它们连接在一起。

当您尝试将本地链接的组件库与您的主 React 应用程序一起使用时，您将看到一条错误消息。错误消息是“无效的挂钩调用。钩子只能在体内调用...'

复制问题：

你有一个 React 应用程序 您有一个单独的组件库项目

在开发中，您使用npm link my-component-library 将您的库连接到您的主项目。

你总是看到以下错误：

...invalid hook call. hooks can only be called inside of the body of a function component...

如果您遇到上述问题，解决方案是使用自定义工具为 React 库设置别名。

如果你在组件库中使用 Material UI，你肯定会遇到这个问题。

这里也讨论过：https://github.com/facebook/react/issues/15315#issuecomment-638504372

【参考方案1】：

你需要自定义导入配置，为此你必须安装一个create react app自定义工具：craco你还需要安装一个别名插件craco-alias

npm install @craco/craco craco-alias --save

https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation https://github.com/risenforces/craco-alias#installation

更改您的 package.json 脚​​本部分。将react-scripts 替换为craco。

添加craco.config.js，内容如下：

const CracoAlias = require('craco-alias');

// Source: https://github.com/facebook/react/issues/15315#issuecomment-638504372
module.exports = 
  plugins: [
    
      plugin: CracoAlias,
      options: 
        source: 'options',
        baseUrl: './',
        aliases: 
          react: './node_modules/react',
          'react-dom': './node_modules/react-dom',
        ,
      ,
    ,
  ],
;

Craco 还让您有机会在不“弹出”项目的情况下进一步自定义您构建的 react，因此您可以在将来更新 create-react-script。

附：使用此解决方案的演示项目：https://github.com/zoltan-nz/meetup-contacts-app-2021/blob/master/craco.config.js