React跨项目共享组件报错：Outside src module not allowed，求解决方案

我之前在多React项目共享组件时也碰到过一模一样的问题，Create React App（CRA）默认的webpack配置会限制只能从项目自身的src/目录导入模块，这是为了安全和规范项目结构设置的。下面给你几个可行的解决方案，按推荐程度排序：

方法一：使用本地包链接（npm/yarn link） #

这是最快捷的本地开发方案，不需要修改配置就能实现跨项目组件引用：

• 第一步：进入你的admin项目根目录，执行链接命令：

  # yarn用户
  yarn link
  # npm用户
  npm link
  

  执行后，admin项目会被注册为本地可引用的包，注意查看admin项目package.json里的name字段（比如叫admin-dashboard），这就是你后续引用的包名。
• 第二步：进入user项目根目录，链接到admin包：

  # yarn用户
  yarn link "admin-dashboard"
  # npm用户
  npm link "admin-dashboard"
  

• 第三步：现在你就能像导入第三方包一样引用admin里的组件了：

  import AdminMenu from 'admin-dashboard/src/components/Menu'
  

方法二：用react-app-rewired修改webpack配置 #

如果不想用link的方式，也可以通过覆盖CRA的webpack配置来允许导入外部目录的模块，而且不需要eject项目：

• 首先安装依赖：

  yarn add react-app-rewired customize-cra --dev
  

• 在user项目根目录创建config-overrides.js文件，添加如下内容：

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

• 修改user项目package.json里的scripts命令，替换成react-app-rewired的命令：

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

• 重启user项目后，就可以通过别名快速导入组件：

  import AdminMenu from '@admin-components/Menu'
  

方法三：打包公共组件为私有npm包 #

如果是团队协作场景，最规范的方式是把admin里需要共享的组件单独打包成私有npm包：

• 可以把admin里的公共组件抽离到单独的目录，配置package.json和打包脚本（比如用rollup或者webpack打包成ES模块）。
• 搭建本地私有仓库（比如用Verdaccio）或者使用npm官方私有仓库，把组件包发布上去。
• 在user项目里通过yarn add @your-org/admin-components安装，然后正常导入即可。

注意事项 #

• 使用npm/yarn link时，如果两个项目有相同依赖（比如react版本不一致），可能会出现重复引用导致的hooks报错，这时候可以在admin项目里把react设为peer依赖，或者在user项目里执行yarn link "react"来共享依赖。
• 如果选择eject项目修改webpack配置（不推荐），可以在webpack.config.js里找到ModuleScopePlugin，把它从插件列表中移除，或者添加允许的外部路径，但eject后就无法再接收CRA的官方更新了。

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