使用Microbundle共享React组件遇TypeScript编译错误，求解决

跨项目共享React页面和组件完全可行，Microbundle也支持React组件打包，并非仅适用于TypeScript库。针对你遇到的报错，可按以下步骤逐一解决：

一、解决TS配置冲突错误（TS5089） #

报错原因是React 17+启用了自动JSX转换（jsx: react-jsx），但Microbundle默认配置的jsxFactory和jsxFragmentFactory选项与之冲突。需手动指定TS配置：

在项目根目录创建/修改tsconfig.json，明确JSX规则：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

Microbundle会读取该配置，覆盖默认的冲突选项，消除TS5089错误。

二、解决React模块及类型声明缺失错误（TS2307） #

你已安装react和react-dom但仍报错，核心问题是依赖配置不合理+类型声明缺失：

1. 调整依赖配置
   将react、react-dom移至peerDependencies（组件库不应打包自身的React，需依赖宿主项目提供），同时添加React类型声明包：
   修改package.json如下：

{
    "name": "rd-component",
    "type": "module",
    "source": "src/index.tsx",
    "exports": {
        "require": "./dist/foo.cjs",
        "default": "./dist/foo.modern.js"
    },
    "main": "./dist/foo.cjs",
    "module": "./dist/foo.module.js",
    "unpkg": "./dist/foo.umd.js",
    "scripts": {
        "build": "microbundle",
        "dev": "microbundle watch"
    },
    "devDependencies": {
        "microbundle": "^0.15.1",
        "@types/react": "^18.0.0",
        "@types/react-dom": "^18.0.0"
    },
    "peerDependencies": {
        "react": "^17.0.0 || ^18.0.0",
        "react-dom": "^17.0.0 || ^18.0.0"
    }
}

2. 重新安装依赖
   执行命令更新依赖：

npm install

三、额外注意事项 #

• React 17+使用自动JSX转换时，组件代码中无需手动导入React，但保留导入也不会影响功能；
• 打包完成后，其他项目可通过npm link或发布到npm仓库的方式引入你的组件库。

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