封装aws-amplify的npm包导入后组件异常及JSX语法报错问题

一、peer dependency 警告问题 #

原因 #

你的组件包将react、react-dom、aws-amplify这类通用依赖放在了dependencies字段中，而这类依赖本应由使用你的组件包的宿主项目提供。当宿主项目安装你的包时，npm会检测到重复依赖版本，触发ERESOLVE警告，提示你应该将这些依赖声明为peer依赖，由宿主项目统一管理版本。

解决办法 #

1. 修改组件包的package.json，将react、react-dom、aws-amplify从dependencies移到peerDependencies，并指定兼容的版本范围，比如：

   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "aws-amplify": "^5.0.0"
   }
   

2. 将这些依赖保留在devDependencies中，用于本地开发和构建：

   "devDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "aws-amplify": "^5.0.0",
     // 其他构建依赖如babel、webpack等
   }
   

3. 重新发布组件包，宿主项目安装时会自动使用自身已有的依赖版本，不会再出现版本冲突警告。

二、JSX实验性语法未启用错误 #

原因 #

你的组件包没有将JSX代码编译为浏览器可识别的普通JavaScript代码，宿主项目构建时直接解析了未编译的JSX文件，而宿主项目的Babel配置默认不会编译node_modules目录下的第三方包，导致JSX语法无法被识别，触发构建错误。

解决办法 #

方案1：确保组件包输出编译后的产物

1. 在组件包中配置Babel或TypeScript，将JSX代码编译为ES5/ES6格式的JS文件。比如使用Babel的话，创建.babelrc配置：

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

2. 在package.json中指定main字段指向编译后的入口文件，比如：

   "main": "dist/index.js"
   

3. 添加构建脚本，在发布前先编译组件：

   "scripts": {
     "build": "babel src --out-dir dist",
     "prepublishOnly": "npm run build"
   }
   

4. 发布前执行npm run build，确保dist目录包含编译后的代码。

方案2：让宿主项目编译你的组件包（针对Create React App项目）

如果宿主项目使用Create React App，默认不会编译node_modules中的包，可通过以下方式修改：

1. 安装react-app-rewired和customize-cra：

   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(
     babelInclude([
       path.resolve('src'),
       path.resolve('node_modules/你的组件包名称')
     ])
   );
   

3. 修改package.json中的启动脚本：

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

内容的提问来源于stack exchange，提问作者A Simple Programmer