多React应用共享外部公共组件时无法导入src目录外文件的问题求助

我之前也碰到过一模一样的坑！Create React App（CRA）默认的webpack配置会严格限制导入src目录外的文件，这是它的安全和约定式配置导致的。你之前试的方法没成功大概率是配置细节没做对，下面几个亲测有效的方案，你可以挨个试试：

方案1：用react-app-rewired + customize-cra 重写webpack配置 #

这个方法不用eject就能修改CRA的默认配置，你之前可能是配置文件写错了：

• 先安装依赖：

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

• 在每个React应用的根目录创建config-overrides.js文件，内容如下（注意路径要对应你的公共组件目录）：

  const path = require('path');
  const { override, addWebpackAlias } = require('customize-cra');
  
  module.exports = override(
    // 给公共组件目录设置别名，方便导入
    addWebpackAlias({
      '@shared-components': path.resolve(__dirname, '../Main Component')
    })
  );
  

• 修改当前React应用package.json里的启动脚本，把react-scripts替换成react-app-rewired：

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

• 之后你就可以在组件里轻松导入公共组件了：

  import CommonButton from '@shared-components/CommonButton';
  

方案2：把公共组件做成本地npm包（推荐长期维护） #

这个方法更规范，适合公共组件需要频繁迭代的场景：

• 先进入你的Main Component目录，修改里面的package.json，给它起个名字（比如@your-name/shared-components），并确保main字段指向你的组件入口文件（比如index.js，用来导出所有公共组件）。
• 在Main Component目录执行：

  npm link
  

• 然后进入每个React应用的目录，执行：

  npm link @your-name/shared-components
  

• 之后你就能像导入第三方库一样用公共组件了：

  import { CommonButton, CommonCard } from '@your-name/shared-components';
  

• 注意：如果公共组件依赖React，为了避免多个React实例导致的hooks报错，需要在每个React应用里执行：

  npm link ../Main Component/node_modules/react
  

方案3：用CRACO替代react-app-rewired（更简洁的配置） #

CRACO是CRA官方推荐的配置重写工具，配置比react-app-rewired更简单：

• 安装依赖：

  npm install @craco/craco --save-dev
  

• 在React应用根目录创建craco.config.js：

  const path = require('path');
  
  module.exports = {
    webpack: {
      alias: {
        '@shared': path.resolve(__dirname, '../Main Component')
      }
    }
  };
  

• 修改package.json的脚本：

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

额外注意点 #

• 公共组件的目录结构要清晰，建议每个组件单独一个文件夹，然后在根目录的index.js统一导出，方便导入。
• 如果你的项目用TypeScript，还要在tsconfig.json里配置paths字段，让TS识别别名：

  "compilerOptions": {
    "paths": {
      "@shared/*": ["../Main Component/*"]
    }
  }
  

• 尽量不要用eject命令，一旦eject就无法再享受CRA的官方更新和维护了。

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