javascript - yarn 工作区和无效的 Hook 调用

Question

尝试设置通用 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';

包.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 别名，我这样做了。我正在使用 yarn 工作区，但不确定这是否以某种方式相关。

Answer 1

运行以下命令:

yarn why react

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

删除所有本地安装

在根工作区安装单个版本的 React，而不是