create-react-app引入自定义React包编译报错，需添加何种Loader？

错误原因 #

create-react-app的默认webpack配置不会编译node_modules目录下的TSX/JSX文件，你的自定义包直接将未转译的TSX源码作为入口暴露给主项目，导致webpack无法解析JSX语法（比如报错里的<Provider>标签），所以出现了"Module parse failed: Unexpected token"错误。

解决方案 #

方案一：正确编译并发布自定义包（推荐） #

这是符合npm包规范的做法，让自定义包自身输出可直接使用的编译后代码：

1. 在自定义包项目中安装必要的编译依赖：

npm install --save-dev typescript @types/react @types/react-dom

2. 配置tsconfig.json，确保编译后输出到dist目录：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "declaration": true,
    "outDir": "./dist",
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

3. 修改自定义包的package.json，指定入口为编译后的文件：

{
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "tsc"
  }
}

4. 运行编译命令生成产物：

npm run build

5. 在主项目中重新安装这个自定义包（本地开发可使用npm link，注意先编译再link）。

方案二：修改主项目webpack配置（临时方案） #

如果暂时无法修改自定义包，可以通过craco修改主项目的webpack配置，让它编译指定的第三方包：

1. 安装craco依赖：

npm install @craco/craco --save-dev

2. 在主项目根目录创建craco.config.js：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 让webpack编译@USER-NAME/any-package包内的TSX文件
      webpackConfig.module.rules.forEach(rule => {
        if (rule.oneOf) {
          rule.oneOf.unshift({
            test: /\.(ts|tsx)$/,
            include: /node_modules\/@USER-NAME\/any-package/,
            loader: require.resolve('ts-loader'),
            options: {
              transpileOnly: true,
              configFile: require.resolve('./tsconfig.json')
            }
          });
        }
      });
      return webpackConfig;
    }
  }
};

3. 修改主项目package.json中的脚本命令：

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

4. 重启开发服务即可生效。

注意事项 #

• 优先选择方案一，因为自定义React包预编译后，所有使用它的项目都无需额外配置，符合npm包的分发规范。
• 如果自定义包使用纯JS而非TS，只需替换为babel编译JSX的流程即可，核心逻辑一致：将JSX转译为标准JS后再作为包入口。

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