“错误：无效的挂钩调用。” 从 monorepo 中的共享组件库导入 React 组件时（turborepo 和 npm 工作区）

Question

我一直在设置一个 monorepo，目标是创建一个共享组件库以用于多个不同的 Next.js 应用程序（按照此示例），但是每当我从共享库导入组件时，我都会得到

Unhandled Runtime Error
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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

1. 钩子 (useState) 正在函数组件的主体内部被调用。如果我从与项目相同的文件夹导入该组件，则该组件可以正常工作
2. 再说一次，它在本地运行良好
3. 据我所知，我的 monorepo 根目录下只有一个版本的 React 和 React-dom，均为 v.17.0.2。在我的共享组件包中react和react-dom被设置为peerDependency

我认为这可能与我在组件中使用的 mui 组件有关，因为该组件可以毫无问题地导入和使用：

    // TestComponent.jsx

    import * as React from 'react';

    export const TestComponent = () => {
      return <h1>test</h1>;
    };

但这会引发无效的挂钩错误：

    // TestButton.jsx

    import * as React from 'react';
    import { Button } from '@mui/material';

    export const TestButton = () => {
      return <Button>Boop</Button>;
    };

这是我的共享组件包的 package.json：

{
  "name": "shared-components",
  "version": "0.0.0",
  "main": ".dist/index.js",
  "module": "./dist/index.mjs",
  "sideEffects": false,
  "license": "MIT",
  "files": [
    "dist/**"
  ],
  "scripts": {
    "build": "tsup src/index.jsx --format esm,cjs --external react",
    "dev": "tsup src/index.jsx --format esm,cjs --watch --external react",
    "lint": "TIMING=1 eslint src --fix",
    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
  },
  "devDependencies": {
    "tsup": "^5.10.1"
  },
  "peerDependencies": {
    "@mui/icons-material": "^5.6.1",
    "@mui/material": "^5.6.1",
    "@mui/utils": "^5.6.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

我已将其添加到我尝试使用共享组件的项目的 next.config.js 中：

const withTM = require('next-transpile-modules')(['shared-components']);

module.exports = withTM({
  reactStrictMode: true,
});

Answer 1

终于解决了这个问题...

我必须将其添加到我的消费者网站的 next.config.js 中

const withTM = require('next-transpile-modules')(['shared-components'], { resolveSymlinks: false });

module.exports = withTM({
  reactStrictMode: true,
});

尽管next-transpile-modules 的文档说对于 npm 工作区，resolveSymlinks 默认情况下应保留为 true，但将其设置为 false 是唯一对我有用的方法。

如果有人可以向我澄清为什么这有效，我很乐意了解，但目前它正在按预期工作。