Invalid Hook Call

[simkessy]

I'm getting this error trying to import my package into an existing project. I've made sure the common library has react and other libs in their peer dependencies which is what is usually recommend but yet I still get the error. My yarn workspace has a few projects in them and they aren't all on the same react version, could that be the issue?

Also if I update my webpack.resolve.alias = react: path.resolve(__dirname, '../../../node_modules/react'),

That seems to work but I'd rather not do that nor see why I have to.

It looks like this:

{
  "name": "@libs/common",
  "version": "1.0.0",
  "description": "Shared Component Library",
  "author": "",
  "license": "MIT",
  "repository": "/tools-common",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.js",
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs --css-modules false",
    "start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false",
    "prepublish": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && yarn install && yarn run build",
    "deploy": "gh-pages -d example/build"
  },
  "peerDependencies": {
    "@ag-grid-community/client-side-row-model": "^23.1.0",
    "@ag-grid-community/react": "^23.1.0",
    "@material-ui/core": "^4.9.13",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.52",
    "@material-ui/pickers": "^3.2.10",
    "gestalt": "1.48.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.7",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
    "@babel/plugin-transform-destructuring": "^7.8.3",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-flow": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "microbundle-crl": "^0.13.8",
    "node-sass": "^4.14.1",
    "npm-run-all": "^4.1.5",
    "prettier": "1.19.1",
    "react": "^16.13.1",
    "react-is": "^16.13.1",
    "react-scripts": "^3.4.1"
  },
  "files": [
    "dist"
  ]
}

My main library package looks like this:

{
    "name": "mainProject",
    "version": "3.0.0",
    "license": "MIT",
    "sideEffects": false,
    "scripts": {
      "dev": "yarn install; yarn api & yarn wds",
      "api": "json-server db.json --watch --routes routes.json  --host 0.0.0.0 --port 3000",
      "wds": "webpack-dev-server --env development --colors --inline",
      "build": "webpack --env development --progress --colors"
    },

    "devDependencies": {
      "@babel/cli": "^7.8.4",
      "@babel/core": "^7.9.6",
      "@babel/plugin-proposal-class-properties": "7.8.3",
      "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
      "@babel/plugin-transform-destructuring": "^7.9.5",
      "@babel/polyfill": "^7.8.7",
      "@babel/preset-env": "^7.9.6",
      "@babel/preset-flow": "^7.9.0",
      "@babel/preset-react": "^7.9.4",
      "@testing-library/jest-dom": "^5.7.0",
      "@testing-library/react": "^10.0.4",
      "@testing-library/react-hooks": "^3.2.1",
      "babel-eslint": "^10.1.0",
      "babel-jest": "^26.0.1",
      "babel-loader": "^8.1.0",
      "babel-plugin-add-react-displayname": "^0.0.5",
      "babel-plugin-import": "^1.13.0",
      "babel-plugin-webpack-alias": "^2.1.2",
      "browser-resolve": "^1.11.3",
      "cache-loader": "^4.1.0",
      "clean-webpack-plugin": "^3.0.0",
      "css-loader": "^3.5.1",
      "cypress": "^4.5.0",
      "enzyme": "^3.11.0",
      "enzyme-adapter-react-16": "^1.15.2",
      "enzyme-to-json": "^3.4.4",
      "eslint": "^6.8.0",
      "eslint-config-airbnb": "^18.1.0",
      "eslint-config-prettier": "^6.11.0",
      "eslint-formatter-pretty": "^3.0.1",
      "eslint-import-resolver-webpack": "^0.12.1",
      "eslint-loader": "^4.0.2",
      "eslint-plugin-flowtype": "^4.7.0",
      "eslint-plugin-import": "^2.20.2",
      "eslint-plugin-jest": "^23.9.0",
      "eslint-plugin-jsx-a11y": "^6.2.3",
      "eslint-plugin-prettier": "^3.1.3",
      "eslint-plugin-react": "^7.19.0",
      "eslint-plugin-react-hooks": "^1.7.0",
      "file-loader": "^6.0.0",
      "flow-bin": "^0.123.0",
      "flow-typed": "^3.1.0",
      "happypack": "^5.0.1",
      "html-webpack-exclude-assets-plugin": "^0.0.7",
      "html-webpack-plugin": "^3.2.0",
      "jest": "^26.0.1",
      "jest-cli": "^26.0.1",
      "jest-environment-jsdom-fourteen": "^1.0.1",
      "jest-html-reporter": "^3.1.0",
      "jest-matchers": "^20.0.3",
      "logrocket": "^1.0.7",
      "logrocket-react": "^4.0.1",
      "mini-css-extract-plugin": "^0.9.0",
      "node-sass": "^4.14.1",
      "optimize-css-assets-webpack-plugin": "^5.0.3",
      "prettier": "1.19.1",
      "prettier-eslint": "^9.0.1",
      "sass-loader": "^8.0.2",
      "style-loader": "^1.2.1",
      "terser-webpack-plugin": "^3.0.1",
      "typescript": "^3.8.3",
      "url-loader": "^4.1.0",
      "url-parse": "^1.4.7",
      "webpack": "^4.42.1",
      "webpack-bundle-analyzer": "^3.7.0",
      "webpack-cli": "^3.3.11",
      "webpack-dev-server": "^3.10.3"
    },
    "dependencies": {
      "@ag-grid-community/client-side-row-model": "^23.1.0",
      "@ag-grid-community/react": "^23.1.0",
      "@bugsnag/js": "^7.0.1",
      "@bugsnag/plugin-react": "^7.0.1",
      "@fortawesome/fontawesome-svg-core": "^1.2.28",
      "@fortawesome/free-solid-svg-icons": "^5.13.0",
      "@fortawesome/react-fontawesome": "^0.1.9",
      "@libs/common": "1.0.0",
      "@material-ui/core": "^4.9.13",
      "@material-ui/icons": "^4.9.1",
      "@material-ui/lab": "^4.0.0-alpha.52",
      "@material-ui/pickers": "^3.2.10",
      "anchorme": "^1.1.2",
      "array-move": "^2.2.1",
      "axios": "^0.19.2",
      "bootstrap": "^3.3.7",
      "classnames": "^2.2.6",
      "compression-webpack-plugin": "^3.1.0",
      "gestalt": "^1.48.0",
      "htmlparser2": "^4.1.0",
      "json-server": "^0.16.1",
      "keycode": "^2.2.0",
      "lodash": "^4.17.15",
      "lodash-es": "^4.17.15",
      "moment": "^2.25.3",
      "object-hash": "^2.0.3",
      "prop-types": "^15.7.2",
      "react-ace": "^8.1.0",
      "react-bootstrap": "^0.31.2",
      "react-bootstrap-table": "^4.3.1",
      "react-bootstrap-table-next": "4.0.0",
      "react-bootstrap-table2-filter": "1.3.1",
      "react-bootstrap-table2-toolkit": "^2.1.2",
      "react-csv": "^2.0.3",
      "react-datetime": "^2.16.3",
      "react": "16.8.6",
      "react-dom": "16.8.6",
      "react-test-renderer": "16.8.6",
      "react-hot-loader": "^4.12.21",
      "react-json-tree": "^0.11.2",
      "react-select": "^3.0.8",
      "react-sortable-hoc": "^1.11.0",
      "react-tag-autocomplete": "^5.11.2",
      "webpack-bugsnag-plugins": "^1.4.3"
    }
  }

My webpack on the main project

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { BugsnagSourceMapUploaderPlugin } = require('webpack-bugsnag-plugins');
const path = require('path');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PrettyEsLintFormatter = require('eslint-formatter-pretty');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HappyPack = require('happypack');
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
const packageJson = require('./package.json');

const ROOT_PATH = path.resolve(__dirname);
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });

const PRODUCTION_PLUGINS = [
  new CompressionWebpackPlugin(),
  new OptimizeCssAssetsPlugin(),
  new BugsnagSourceMapUploaderPlugin({
    apiKey: 'c1fb4c9ee8b66e00257fc9b7e309a3a4',
    appVersion: packageJson.version,
    overwrite: true
  }),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  new HtmlWebpackExcludeAssetsPlugin()
];

module.exports = env => {
  return {
    mode: env === 'production' ? 'production' : 'development',

    entry: {
      dashboard: './src/dashboard_entry.jsx',
    },

    output: {
      path: path.resolve(ROOT_PATH, 'dist'),
      publicPath: env === 'production' ? './static/' : '/',
      filename: '[name].bundle.js',
      chunkFilename: '[id].bundle.js'
    },

    devtool: 'source-map',

    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'eslint-loader',
          options: {
            configFile: '.eslintrc.json',
            formatter: PrettyEsLintFormatter,
            cache: true
          }
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        }
      ]
    },

    // OPTIMIZATIONS - THERE ARE VARIOUS OPTIONS - SEE https://webpack.js.org/configuration/optimization/
    optimization: {
      usedExports: true,
      minimizer: [
        new TerserPlugin({
          cache: true,
          parallel: true,
          sourceMap: true,
        })
      ]
    },

    resolve: {
      symlinks: false,
      extensions: ['*', '.js', '.jsx', '.css', 'scss'],
      alias: {
        Root: path.resolve(__dirname),
        Utils: path.resolve(__dirname, './src/utils/'),
        Hoc: path.resolve(__dirname, './src/hoc/'),
        Components: path.resolve(__dirname, './src/components/'),
        FlowTypes: path.resolve(__dirname, './src/types/')
      }
    },

    plugins: [
      // new BundleAnalyzerPlugin(),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(env)
      }),
      new MiniCssExtractPlugin({
        filename: '[name].bundle.css'
      }),
      new CleanWebpackPlugin(),
      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'
          }
        ]
      }),
      new webpack.DefinePlugin({
        ENVIRONMENT: JSON.stringify(env)
      }),

      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

      ...(env === 'production' ? PRODUCTION_PLUGINS : [])
    ],

  };
};