React hooks duplication causing 'Invalid Hook Call' errors in monorepo setup

[kbzowski]

I am using yarn and rspack in my app (react) in monorepo.
I extracted part of UI elements to internal project to be able to share them between different projects. Shared part is built using tsup, like:

import { defineConfig } from 'tsup';

export default defineConfig({
    entry: ['src/index.ts'],
    format: 'esm',
    tsconfig: './tsconfig.json',
    target: 'esnext',
    minify: true,
    sourcemap: true,
    clean: false,
});

All shared deps where put in peerDependencies section:

{
  "name": "@mivia/viz-kit",
  "version": "1.0.0",
  "scripts": {
    "build": "rimraf ./dist; tsup --config tsup.esm.ts; tsup --config tsup.cjs.ts; tsup --config tsup.dts.ts",
    "lint": "eslint .",
    "pack": "yarn pack",
    "clean": "rimraf ./dist"
  },
  "sideEffects": false,
  "publishConfig": {
    "access": "public"
  },
  "dependencies": {
    "mivia-shared": "workspace:*"
  },
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.mjs"
      },
      "require": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.js"
      }
    },
    "./styles.css": "./dist/styles.css",
    "./styles.layer.css": "./dist/styles.layer.css"
  },
  "files": [
    "./dist"
  ],
  "devDependencies": {
    "@ebay/nice-modal-react": "^1.2.13",
    "@eslint/js": "^9.18.0",
    "@mantine/core": "^7.15.3",
    "@mantine/hooks": "^7.15.3",
    "@nivo/bar": "^0.88.0",
    "@tabler/icons-react": "^3.28.1",
    "@types/node": "^22.10.5",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.18.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.18",
    "globals": "^15.14.0",
    "i18next": "^24.2.1",
    "postcss": "^8.4.49",
    "postcss-preset-mantine": "^1.17.0",
    "postcss-simple-vars": "^7.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-i18next": "^15.4.0",
    "rimraf": "^6.0.1",
    "tsup": "^8.3.5",
    "typescript": "~5.7.3",
    "typescript-eslint": "^8.19.1",
    "vite": "^6.0.7",
    "vite-plugin-dts": "^4.5.0"
  },
  "peerDependencies": {
    "@ebay/nice-modal-react": ">=1.2.0",
    "@mantine/core": ">=7.13",
    "@mantine/hooks": ">=7.13",
    "@nivo/bar": ">=0.88.0",
    "@nivo/core": ">=0.88.0",
    "@tabler/icons-react": ">=3.28",
    "i18next": ">=24.0.0",
    "react": ">=18",
    "react-dom": ">=18",
    "react-i18next": ">=15.4.0"
  }
}

My problem is that main app (built with rsbuild) started showing strange errors like "Invalid Hook call". I think this is due to react libs duplication in final bundle. Problem can be mitigated somehow if I remove nmHoistingLimits: workspaces from .yarnrc.yml but then webstorm has a problem with tracking dependencies. So the question is, can rsbuild help me solve this problem?

This is my current rsbuild.config.ts

import { defineConfig, HtmlTagDescriptor, loadEnv } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSvgr } from '@rsbuild/plugin-svgr';
import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
import dayjs from 'dayjs';
import { OneOrMany } from '@rsbuild/core/dist-types/types';

const { publicVars } = loadEnv({ prefixes: ['REACT_APP_'] });

const devTags: OneOrMany<HtmlTagDescriptor> = [
    {
        tag: 'script',
        attrs: { src: 'https://unpkg.com/react-scan/dist/auto.global.js' }
    }
];

export default defineConfig({
    plugins: [
        pluginReact({
            swcReactOptions: {
                importSource: '@emotion/react',
            },
        }),
        pluginSvgr(),
        pluginTypedCSSModules(),
        pluginTypeCheck(),
    ],
    html: {
        template: './public/index.html',
        tags: process.env.NODE_ENV === 'development' ? devTags : [],
    },
    output: {
        distPath: {
            root: 'build',
        },
    },
    source: {
        define: {
            ...publicVars,
            BUILD_DATE: JSON.stringify(dayjs().format('YYYY-MM-DD')),
        },
    },
});

=== EDIT:

I managed to solved it using

    resolve: {
        dedupe: ['react', 'react-dom', '@mantine/core', '@mantine/hooks'],
    }

But this is not very efficient if new libs would be added

[9aoy]

resolve.dedupe is an effective way to avoid duplicate packages.

But this is not very efficient if new libs would be added

One scenario I can think of is that react has been bundled in the lib. In addition, can you provide a reproducible repo?