嵌套React.js应用间的组件共享问题求助

我之前也碰到过这种嵌套CRA项目的组件导入问题，核心原因其实是Create-React-App默认不允许直接修改它的webpack配置文件——你手动改的webpack.admin.dev.js大概率没被项目实际加载，所以别名不生效导致报错。下面给你几个可行的解决方案：

方案一：用react-app-rewired扩展配置（最推荐，无需eject） #

这是不用暴露配置的最优解，步骤如下：

1. 先在admin项目里安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在admin项目根目录新建config-overrides.js文件，写入别名配置：

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    // 替换成主应用Icons文件夹的实际相对路径，比如主应用在admin的上级目录就写'../main-app/Icons'
    '@main-icons': path.resolve(__dirname, '../主应用的实际路径/Icons')
  })
);

3. 修改admin项目package.json里的启动脚本，把默认的react-scripts替换成react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

4. 现在就可以在admin/src/pages/MyFavoriteIconsInTheWorld.js里愉快导入了：

import { HomeIcon, UserIcon } from '@main-icons/HomeIcon'; // 替换成你实际的组件名

方案二：直接用相对路径导入（简单粗暴） #

如果不想折腾配置，直接用相对路径指向主应用的Icons组件就行，比如：

// 根据你的目录层级调整路径，比如主应用在admin的上级目录
import { HomeIcon } from '../../../main-app/Icons/HomeIcon';

缺点是路径层级深的时候容易写错，后期目录结构变动也得跟着改。

方案三：Eject暴露webpack配置（不推荐，不可逆） #

如果你能接受不可逆的配置暴露，可以试试这个：

1. 在admin项目根目录运行：

npm run eject

2. 找到暴露后的config/webpack.config.js文件，在resolve.alias里添加你的别名：

resolve: {
  alias: {
    // 保留原有别名，新增这一行
    '@main-icons': path.resolve(__dirname, '../主应用的实际路径/Icons'),
    'react-native': 'react-native-web',
  },
}

3. 保存后重启项目，就能正常用别名导入了。

额外排查点 #

• 确认主应用的Icons组件是正确导出的（用export导出单个组件，或者export default导出默认组件）
• 如果用了TypeScript，还要在admin项目的tsconfig.json里添加paths配置，和webpack别名对应：

"compilerOptions": {
  "paths": {
    "@main-icons/*": ["../主应用的实际路径/Icons/*"]
  }
}

内容的提问来源于stack exchange，提问作者Sean Clancy