CRA构建React项目引入本地npm组件出现loader缺失报错求助

这个报错的核心原因是：你通过本地路径安装的通用组件在node_modules里是符号链接，指向的是本地未转译的ES6代码，但CRA默认只会转译src目录内的文件，对node_modules里的内容会跳过转译，导致webpack无法处理这些ES6语法，所以提示需要合适的loader。

既然你已经执行了eject，可以直接修改webpack配置来解决这个问题，具体步骤如下：

1. 找到并修改webpack配置文件 #

需要同时修改webpack.config.dev.js和webpack.config.prod.js（确保开发和生产环境都能正常构建）：

方式一：修改exclude规则，让babel-loader处理指定的node_modules组件 #

找到配置中处理JS/JSX的规则（通常是包含test: /\.(js|jsx)$/的项），原来的规则可能有exclude: /node_modules/，我们修改这个exclude，让它排除除了你的common组件之外的所有node_modules内容：

{
  test: /\.(js|jsx)$/,
  loader: require.resolve('babel-loader'),
  // 排除node_modules，但node_modules下的common目录除外
  exclude: /node_modules(?!\/common)/,
  options: {
    // 保留原有的options配置，比如cacheDirectory等
    cacheDirectory: true,
  },
},

这里的(?!\/common)是正则的负向预查语法，意思是当node_modules下的子目录是common时，不执行排除。

方式二：直接将通用组件路径加入include列表 #

如果符号链接的路径解析有问题，可以直接把本地common组件的实际路径加入到include中：
首先在配置文件顶部引入path模块（如果还没引入的话）：

const path = require('path');

然后定义通用组件的路径：

// 根据你的实际目录结构调整路径，比如当前配置文件在config目录，所以../common指向项目外的common组件
const commonComponentPath = path.resolve(__dirname, '../common');

接着修改JS/JSX的处理规则：

{
  test: /\.(js|jsx)$/,
  // 同时包含src目录和通用组件目录
  include: [paths.appSrc, commonComponentPath],
  loader: require.resolve('babel-loader'),
  options: {
    cacheDirectory: true,
  },
},

2. 确保通用组件有正确的Babel配置 #

你的本地通用组件需要有Babel配置文件（比如.babelrc或babel.config.json），告诉babel-loader如何转译它的代码。示例配置如下：
在common组件的根目录创建.babelrc：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

如果你的项目中还没安装这些preset，需要执行安装命令：

npm install --save-dev @babel/preset-react @babel/preset-env

3. 重启开发服务 #

修改完配置后，重启你的React开发服务，应该就能正常加载通用组件了。

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