基于Vite在React Monorepo中创建组件库并内部引用的问题

问题背景 #

我有一个React Monorepo，希望在仓库内新建一个Vite项目作为组件库doorframe，将组件导出供仓库内的主应用（包含3个子应用）使用，无需发布到npm，仅在工作区内使用。尝试时遇到错误：

./src/amp/components/TableAnswer/TableAnswer.js Module not found: You attempted to import ../../../../../../doorframe/src/components/door/EdiTable which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

当前路径结构 #

src -- 
    --- doorframe [基于Vite的新组件库]
       ---src 
          ---main.jsx
    --- main [包含3个子应用的主应用，通过路由整合] 
       ---src 
          ---App1
          ---App2
          ---App3

已完成的配置 #

1. doorframe的package.json：

{
  "name": "@doorframe",
  "author": "",
  "version": "1.0.0",
  "description": "doorframe: design system",
  "main": "./src/index.ts"
}

2. 主应用的package.json已添加依赖：

{
  "dependencies": {
    "@doorframe": "workspace:*"
  }
}

期望通过import Button from '@doorframe'的方式导入组件，但尝试后未成功，请问是否可行及如何解决？

解决方案 #

完全可行，问题出在工作区配置、组件库导出配置和主应用构建限制这几个环节，按以下步骤调整：

1. 完善Monorepo工作区定义 #

确保根目录存在工作区配置文件（根据你用的包管理器选择）：

• 如果用pnpm，在根目录创建pnpm-workspace.yaml：

packages:
  - "src/doorframe"
  - "src/main"

• 如果用npm/yarn，在根目录的package.json中添加：

{
  "private": true,
  "workspaces": [
    "src/doorframe",
    "src/main"
  ]
}

执行包管理器的安装命令（pnpm install/npm install/yarn install），让工具识别工作区依赖。

2. 优化组件库的导出配置 #

修改doorframe的package.json，补充exports字段明确导出入口，同时确保main指向正确的入口文件（如果还没有src/index.ts，需要新建这个文件统一导出组件）：

{
  "name": "@doorframe",
  "author": "",
  "version": "1.0.0",
  "description": "doorframe: design system",
  "main": "./src/index.ts",
  "exports": {
    ".": "./src/index.ts",
    "./components/*": "./src/components/*"
  },
  "type": "module" // 若使用Vite+ES模块，添加该字段
}

在doorframe/src/index.ts中统一导出组件：

export { default as EdiTable } from './components/door/EdiTable';
export { default as Button } from './components/Button';
// 其他组件导出

3. 解决主应用的跨目录导入限制 #

错误提示里的“Relative imports outside of src/ are not supported”说明主应用大概率是用Create React App（CRA）创建的，CRA默认限制了只能从src目录内导入。解决方式有两种：

方式一：用工具修改CRA配置

• 安装craco（Create React App Configuration Override）：

npm install @craco/craco --save-dev

• 在主应用根目录创建craco.config.js，添加路径别名配置：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@doorframe': path.resolve(__dirname, '../../doorframe/src')
    }
  }
};

• 修改主应用package.json中的启动/构建命令，替换react-scripts为craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

方式二：如果主应用也用Vite

如果主应用是Vite项目，直接修改vite.config.js的resolve.alias：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@doorframe': path.resolve(__dirname, '../../doorframe/src')
    }
  }
});

4. 正确导入组件 #

现在可以直接通过别名导入：

import { EdiTable, Button } from '@doorframe';

内容的提问来源于stack exchange，提问作者Laura Smith