Yarn Workspaces and Invalid Hook call

Question

Having a lot of trouble trying to set up a common UI library.

I've set up a yarn workspace which looks like this:

/monorepo
   /common-16.13
   /react-app-16.8.
   /another-app-16.13

I then import common-16.13 into react-app-16.8 and use one of the components like this:

 /react-app/home.js
    import {SharedComponent} from "common"

However when I run the application I get this error:

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

Inside common I have:

/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'
              }
            ]
          })
        ]
      }

So I bundle common. Then in my react-app I yarn install @lib/common. Then I import SharedComponent into my react app:

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

It bundles fine but when I run the application I run into the error above. I can't tell if it's related to how i'm exporting my common components, but it it seems right. I read I should have a react alias in my app, which I do. I'm using yarn workspaces and not sure if that's related somehow.

Answer 1

Run the following command:

yarn why react

If the result shows that you have multiple versions of react:

1. Remove all local installations
2. Install a single version of React in the root workspace instead

Answer 2

this is probably a bug coming from yarn

issue: https://github.com/yarnpkg/yarn/issues/8540

I did a workaround by:

1. exporting my common package into a new private github repo

2. create access token https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token

3. in my package.json dependencies I added:

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

Answer 3

It happened to me when when migrating existing project to mono repo. It was caused because I copied the lock files into the packages folders. I've solved it by deleting any node_modules and any lock(yarn.lock and package-lock) from any package folder and then running yarn install on root directory.