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

【问题标题】：Yarn Workspaces and Invalid Hook call纱线工作区和无效的挂钩调用
【发布时间】：2020-07-30 11:37:44
【问题描述】：

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

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

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

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

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

【问题讨论】：

Hooks 与 Class 组件不兼容。要使用 Hook，您需要将类组件转换为函数组件。
整棵树都是这样吗？例如，我的公共库有一个包含挂钩的函数组件。这是否意味着我不能将该组件导入任何导致顶级类组件的东西？
不，你可以这样做。你能分享一下有错误的代码块吗？
我目前无法在我的项目中离开 webpack。我认为这是一个可以解决的问题，但我确信其他人不得不处理类似的设置
所以我已经更改了 peerDependency 但是 babel-loader 无法导入包。

标签： javascript reactjs webpack react-hooks babel-loader

【解决方案1】：

运行以下命令：

yarn why react

如果结果显示你有多个react版本：

删除所有本地安装
改为在根工作区安装单个版本的 React

【讨论】：

【解决方案2】：

这可能是来自纱线的错误

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

我通过以下方式解决了问题：

将我的通用包导出到新的私有 github 存储库中
创建访问令牌 https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token
在我的package.jsondependencies 中我添加了：

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

【讨论】：

【解决方案3】：

在将现有项目迁移到 mono repo 时发生在我身上。这是因为我将锁定文件复制到包文件夹中。我已经通过从任何包文件夹中删除任何 node_modules 和任何锁（yarn.lock 和包锁）然后在根目录上运行 yarn install 来解决它。

【讨论】：