跨三层仓库导入React组件时出现无效钩子调用错误求助

仓库结构 #

• AKG-Storybook：组件库，包含使用Hook的React组件
• StoryPage（React/Vite）：基于AKG-Storybook构建通用页面，计划打包后供其他项目导入
• Test（React/Vite）：测试项目，通过npm link关联StoryPage以验证可用性

问题现象 #

当StoryPage导入AKG-Storybook中含Hook的组件时：

• StoryPage本地执行npm run dev可正常运行
• 将StoryPage导入Test仓库后，触发以下错误：

Warning: 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

若导入的AKG-Storybook组件未使用Hook，两个仓库均能正常运行，仅含Hook组件经StoryPage中转导入Test时触发错误。

各仓库package.json关键配置 #

AKG-Storybook #

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
},
"peerDependencies": {
  "react": ">=16.13.1",
  "react-dom": ">=16.13.1",
  "react-router-dom": "^5.3.4",
  "cheerio": "=1.0.0-rc.3"
},

StoryPage #

"dependencies": {
  "axios": "^1.5.1",
  "date-fns-tz": "^2.0.0",
  "akg-ui-storybook": "^3.0.1"
},
"peerDependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "akg-ui-storybook": "^3.0.1"
},

Test仓库 #

"dependencies": {
  "akg-ui-storybook": "^3.0.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

解决方案 #

1. 修复AKG-Storybook的依赖配置 #

组件库不应将react和react-dom放在dependencies中（会导致组件库自带React副本），仅保留在peerDependencies即可，修改后：

"dependencies": {
  // 移除react和react-dom
},
"peerDependencies": {
  "react": ">=16.13.1",
  "react-dom": ">=16.13.1",
  "react-router-dom": "^5.3.4",
  "cheerio": "=1.0.0-rc.3"
},
"peerDependenciesMeta": {
  "react": { "optional": false },
  "react-dom": { "optional": false }
}

执行npm install重新安装依赖，确保组件库不再自带React。

2. 配置StoryPage的Vite解析别名 #

在StoryPage的vite.config.ts中添加别名，强制使用当前项目的React副本，同时打包时排除React：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'react': path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom')
    }
  },
  build: {
    lib: {
      entry: 'src/App.tsx',
      name: 'StoryPage',
      formats: ['es', 'umd'],
      fileName: (format) => `story-page.${format}.js`
    },
    rollupOptions: {
      // 标记为外部依赖，不打包进产物
      external: ['react', 'react-dom', 'akg-ui-storybook'],
      output: {
        globals: {
          react: 'React',
          reactDom: 'ReactDOM',
          'akg-ui-storybook': 'AKGStorybook'
        }
      }
    }
  }
});

3. 解决npm link的React冲突 #

在StoryPage目录下执行以下命令，让其关联Test仓库的React副本：

npm link ../Test/node_modules/react
npm link ../Test/node_modules/react-dom

4. 验证修复结果 #

在Test仓库执行命令检查React副本数量：

npm ls react

若输出仅显示Test仓库node_modules下的React，说明多副本问题已解决。

内容的提问来源于stack exchange，提问作者Sebastian Ong