pnpm Monorepo中React Native使用ComponentPropsWithRef遇类型错误

问题场景 #

在pnpm monorepo环境下，尝试为React Native的Button/View组件用ComponentPropsWithRef定义Props类型，代码如下：

export type Props = React.ComponentPropsWithRef<typeof Button> & {
    children?: React.ReactNode
}

出现的类型错误 #

Type 'typeof Button' does not satisfy the constraint 'ElementType<any, keyof IntrinsicElements>'.
  Type 'typeof Button' is not assignable to type 'ComponentClass<any, any>'.
    Types of property 'contextType' are incompatible.
      Type 'import("/folder/node_modules/.pnpm/@types+react@18.2.8/node_modules/@types/react/index").Context<any> | undefined' is not assignable to type 'React.Context<any> | undefined'.
        Type 'import("/folder/node_modules/.pnpm/@types+react@18.2.8/node_modules/@types/react/index").Context<any>' is not assignable to type 'React.Context<any>'.
          The types of 'Provider.propTypes' are incompatible between these types.
            Type 'import("/folder/node_modules/.pnpm/@types+react@18.2.8/node_modules/@types/react/index").WeakValidationMap<import("/folder/node_modules/.pnpm/@types+react@18.2.8/node_modules/@types/react/index").ProviderProps<any>> | undefined' is not assignable to type 'React.WeakValidationMap<React.ProviderProps<any>> | undefined'.
              Type 'import("/folder/node_modules/.pnpm/@types+react@18.2.8/node_modules/@types/react/index").WeakValidationMap<import("/folder/node_modules/.pnpm/@types+react@18.2.8/node_modules/@types/react/index").ProviderProps<any>>' is not assignable to type 'React.WeakValidationMap<React.ProviderProps<any>>'.
                Types of property 'children' are incompatible.
                  Type 'import("/folder/node_modules/.pnpm/@types+react@18.2.8/node_modules/@types/react/index").Validator<import("/folder/node_modules/.pnpm/@types+react@18.2.8/node_modules/@types/react/index").ReactNode> | undefined' is not assignable to type 'React.Validator<React.ReactNode> | undefined'.
                    Type 'import("/folder/node_modules/.pnpm/@types+react@18.2.8/node_modules/@types/react/index").Validator<import("/folder/node_modules/.pnpm/@types+react@18.2.8/node_modules/@types/react/index").ReactNode>' is not assignable to type 'import("/folder/node_modules/.pnpm/@types+prop-types@15.7.5/node_modules/@types/prop-types/index").Validator<React.ReactNode>'.
                      Type 'import("/folder/node_modules/.pnpm/@types+react@18.2.8/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
                        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
                          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2344)
index.d.ts(369, 9): 'children' is declared here.

项目package.json配置 #

{
    "name": "@acme/react-native",
    "version": "0.0.0",
    "main": "./dist/index.js",
    "types": "./dist/index.d.ts",
    "exports": {
        ".": {
            "types": "./dist/index.d.ts",
            "import": "./dist/index.mjs",
            "default": "./dist/index.js"
        },
        "./package.json": "./package.json"
    },
    "sideEffects": false,
    "files": [
        "dist"
    ],
    "scripts": {
        "build": "tsup",
        "dev": "tsup --watch",
        "lint": "eslint \"**/*.{ts,tsx}\" --max-warnings 0",
        "test": "jest --config ./jest.config.ts --passWithNoTests",
        "test:watch": "jest --config ./jest.config.ts --watch",
        "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
        "typecheck": "tsc --noEmit"
    },
    "devDependencies": {
        "@acme/eslint-config": "workspace:*",
        "@acme/tsconfig": "workspace:*",
        "@acme/tsup-config": "workspace:*",
        "@types/react": "^18.2.63",
        "eslint": "^8.15.0",
        "react": "^18.2.0",
        "react-native": "^0.73.5",
        "typescript": "4.8.4"
    },
    "peerDependencies": {
        "react": "*",
        "react-native": "*"
    },
    "publishConfig": {
        "access": "public"
    },
    "eslintConfig": {
        "root": true,
        "extends": [
            "@topaz/eslint-config/base",
            "@topaz/eslint-config/react"
        ]
    }
}

已尝试的无效操作 #

• 卸载重装不同版本的@types/react、react、react-native
• 删除node_modules并执行pnpm store prune后重装

解决方案 #

这个错误本质是pnpm monorepo中出现了多版本的React类型依赖冲突，导致不同包的React类型定义无法兼容。可以通过以下步骤解决：

1. 统一React及相关类型包的版本 #

在monorepo的根目录package.json中添加pnpm.overrides配置，强制所有子包使用同一版本的React、@types/react和react-native：

{
  "pnpm": {
    "overrides": {
      "react": "^18.2.0",
      "@types/react": "^18.2.63",
      "react-native": "^0.73.5"
    }
  }
}

2. 调整组件Props定义方式 #

如果统一版本后仍有问题，可以换用React Native提供的专用类型工具：

// 从react-native导入组件的Props类型
import type { ButtonProps } from 'react-native';

export type Props = ButtonProps & {
    children?: React.ReactNode
};

更推荐直接使用RN官方导出的Props类型，避免跨包类型兼容问题。

3. 清理缓存并重装依赖 #

执行以下命令彻底清理缓存和依赖：

pnpm recursive exec rm -rf node_modules
pnpm store prune
pnpm install

4. 检查tsconfig配置 #

确保子包的tsconfig.json中，React的类型路径正确，没有引入多个版本：

{
  "compilerOptions": {
    "types": ["react", "react-native"],
    "moduleResolution": "node",
    "jsx": "react-native"
  }
}

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