如何让Create React App将本地链接的组件包视为应用代码编译？

问题原因 #

Create React App（CRA）默认会跳过node_modules目录下所有文件的编译，包括通过npm link关联的本地组件包。你的组件包中未编译的JSX代码被主应用直接读取，导致Babel无法识别语法，抛出错误。

解决方案 #

以下是几种无需额外编译步骤、无需发布组件包的方案，让主应用将本地组件包视为自身代码的一部分，使用相同的编译规则：

方案一：直接本地路径导入（最简便） #

不需要npm link，直接在主应用的package.json中添加本地组件包的依赖：

"dependencies": {
  "demo-components": "file:../demo-components"
}

执行npm install后，主应用会将该本地包视为依赖，且CRA会自动编译其中的代码（因为是本地文件，不会被归为node_modules的忽略范围）。

组件包的package.json需配置：

{
  "name": "demo-components",
  "main": "src/index.js", // 指向未编译的源码入口
  "peerDependencies": {
    "react": "^x.x.x", // 与主应用React版本一致
    "react-dom": "^x.x.x"
  }
}

方案二：用react-app-rewired修改CRA配置（适配npm link场景） #

如果必须使用npm link，可以通过react-app-rewired修改webpack配置，让CRA将指定的本地组件包纳入编译范围：

1. 安装依赖：

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

2. 在主应用根目录创建config-overrides.js：

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

module.exports = override(
  // 将主应用src目录和本地组件包目录都纳入Babel编译范围
  babelInclude([
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, '../demo-components') // 替换为你的组件包绝对路径
  ])
);

3. 修改主应用package.json的scripts命令：

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

4. 组件包配置同方案一，确保main指向源码入口，peerDependencies声明React依赖。

方案三：Eject后修改webpack配置（不推荐） #

如果你已经执行了npm run eject，可以直接修改主应用根目录下的config/webpack.config.js：
找到module.rules中处理JS/JSX的规则，将本地组件包路径添加到include数组中：

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: [
    paths.appSrc,
    path.resolve(__dirname, '../demo-components') // 添加组件包路径
  ],
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    // ... 其他原有配置
  }
}

此方法会暴露所有CRA的底层配置，后续升级CRA会比较麻烦，仅作为备选。

为什么之前的.babelrc无效？ #

CRA的Babel配置是封装在内部的，默认会忽略node_modules目录下的自定义Babel配置文件。即使你在组件包或主应用根目录添加.babelrc，也不会作用于node_modules中的组件包代码，因此无法解决JSX编译问题。

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