纱线工作区和无效的挂钩调用

Question

尝试设置通用 UI 库时遇到很多麻烦。

我设置了一个纱线工作区，如下所示：

/monorepo

   /common-16.13

   /react-app-16.8.

   /another-app-16.13

然后我导入common-16.13并react-app-16.8使用如下组件之一：

 /react-app/home.js

    import {SharedComponent} from "common"

但是，当我运行应用程序时，出现此错误：

react.development.js?80c6:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)

2. You might be breaking the Rules of Hooks

3. You might have more than one copy of React in the same app

里面常见的我有：

/src/components/SharedComponent.jsx:

    import React from 'react';

    import { Box } from 'material-ui/core';

    export const ShareComponent = ()=> <Box>SharedComponent</Box>;

/src/components/index.js:

   export { SharedComponen t} from 'SharedComponent';

/src/index.js:

   export {SharedComponent } from './components';

所以我捆绑普通。然后在我的 react-app 中安装 @lib/common。然后我将 SharedComponent 导入我的反应应用程序：

/react-app/src/index.js:

   import { SharedComponent } from '@libs/common';

/react-app/webpack.config.js:

{

  // Each key value generate a page specific bundle

  entry: {

    index: './src/index.jsx',

  },

  module: {

    rules: [

      {

        test: /\.(js|jsx)$/,

        exclude: /node_modules/,

        loader: 'babel-loader'

      },

    ]

  },

  // Automatically resolve below extensions

  // Enable users to leave off the extensions when importing

  resolve: {

    extensions: ['*', '.js', '.jsx', '.css', 'scss'],

    alias: {

      react: path.resolve('./node_modules/react'),

    }

  },

  output: {

    path: path.resolve(ROOT_PATH, 'dist'),

    publicPath: '/',

    filename: '[name].bundle.js',

    chunkFilename: '[id].bundle.js'

  },

};

它捆绑得很好，但是当我运行应用程序时，我遇到了上面的错误。我不知道它是否与我如何导出我的通用组件有关，但它似乎是正确的。我读到我应该在我的应用程序中有一个反应别名，我这样做了。我正在使用纱线工作区，但不确定这是否以某种方式相关。

Answer 1

运行以下命令：yarn&nbsp;why&nbsp;react如果结果显示你有多个版本的 react：删除所有本地安装而是在根工作区安装单个版本的 React

Answer 2

这可能是来自纱线的错误问题：&nbsp;https ://github.com/yarnpkg/yarn/issues/8540我做了一个解决方法：将我的通用包导出到新的私有 github 存储库中创建访问令牌&nbsp;https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token在我的package.json&nbsp;dependencies我补充说：&nbsp;&nbsp;"common":&nbsp;"git+https://{accessToken}:[e-mail]/{user}/{repo}.git",