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

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';

包.json：

  {  
       "name": "@libs/common",
       "main": "dist/index.js",
       "scripts" {
          "build": "webpack"
       }
  }

/common/webpack.config.json: 

    const webpack = require('webpack');

    module.exports = env => {
        // Each key value generate a page specific bundle
        entry: {
          index: './src/index.js'
        },

        output: {
          path: path.resolve(ROOT_PATH, 'dist'),
          publicPath: '/',
          filename: 'index.js',
          library: '@libs/common',
          libraryTarget: 'umd'
        },

        module: {
          rules: [
            {
              test: /\.(js|jsx)$/,
              use: 'happypack/loader?id=jsx',
              exclude: /node_modules/
            }
          ]
        },
        // Automatically resolve below extensions
        // Enable users to leave off the extensions when importing
        resolve: {
          symlinks: false,
          extensions: ['*', '.js', '.jsx', '.css', '.scss']
        },

        plugins: [
          new HappyPack({
            id: 'css',
            threadPool: happyThreadPool,
            loaders: [
              'cache-loader',
              'style-loader',
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  hmr: true
                }
              },
              'css-loader',
              'sass-loader'
            ]
          }),
          new HappyPack({
            id: 'jsx',
            threadPool: happyThreadPool,
            loaders: [
              'cache-loader',
              {
                loader: 'babel-loader'
              }
            ]
          })
        ]
      }

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

/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'
  },
};

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

Answer 1

这可能是来自纱线的错误

问题： https: //github.com/yarnpkg/yarn/issues/8540

我做了一个解决方法：

1. 将我的公共包导出到新的私有 github 存储库中

2. 创建访问令牌 https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token

3. 在我的package.json dependencies我添加：

  "common": "git+https://{accessToken}:x-oauth-basic@github.com/{user}/{repo}.git",