使用react-app-rewired共享React组件遇JSX语法支持错误求助

一、是否遗漏操作步骤？ #

是的，你遗漏了两个关键步骤：

1. 给shared项目添加Babel配置
   直接导入未编译的shared/src/Test.js时，Babel无法识别JSX语法，需要在shared根目录创建.babelrc文件，添加React转译预设：

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

   同时安装对应的开发依赖：

   cd shared && npm install --save-dev @babel/preset-react @babel/preset-env
   

2. 修正config-overrides.js中的路径配置
   原配置中fs.realpathSync("node_modules/shared/src")的路径写法存在潜在问题，建议改为动态路径，同时简化冗余代码：

   var path = require('path');
   const { override, addDecoratorsLegacy, babelInclude, disableEsLint } = require("customize-cra");
   
   module.exports = override(
     disableEsLint(),
     addDecoratorsLegacy(),
     babelInclude([
       path.resolve('src'),
       path.resolve(__dirname, 'node_modules/shared/src')
     ])
   )
   

二、更简便的共享库搭建方式 #

推荐以下几种无需react-app-rewired的方案：

1. npm 本地链接方案 #

• 在shared根目录执行：npm link，将本地包注册到全局
• 在my-app根目录执行：npm link shared，直接关联本地shared包
• 给shared的package.json添加编译脚本和入口配置：

  {
    "main": "dist/index.js",
    "scripts": {
      "build": "babel src --out-dir dist"
    }
  }
  

  修改shared代码后执行npm run build，my-app即可同步使用最新组件。

2. Monorepo 工作区方案（pnpm/Yarn） #

• 在仓库根目录创建package.json，配置工作区：

  {
    "private": true,
    "workspaces": ["shared", "my-app"]
  }
  

• 在shared的package.json中设置包名（如"name": "@my/shared"）
• 在my-app中直接安装依赖：pnpm add @my/shared（或yarn add @my/shared）
• 配合babel或tsdx自动编译shared，无需手动处理链接。

3. 组件库脚手架（tsdx） #

直接用tsdx快速初始化共享组件库，它会自动处理编译、打包、语法转译：

npx tsdx create shared

初始化完成后，在my-app中直接导入shared即可，修改代码后会自动热更新编译结果。

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