React Native升级后Element类型无效错误排查求助

将React Native从0.68版本升级到0.71版本后，出现如下错误：

ERROR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.

提示需检查BrandWrapper组件的render方法，相关代码如下：

BrandWrapper.tsx #

import GscLogo from 'common/assets/svg/app_logo.svg'
import GscLogoFr from 'common/assets/svg/app_logo_fr.svg'
import { LocalizationContext } from 'common/components/Translations'
import React, { useContext } from 'react'
import Type from '../Type'
import AnimatedBlueShape from './AnimatedBlueShape'
import AnimatedGreenShape from './AnimatedGreenShape'
import {
  BlueShapeView,
  GreenShapeView,
  ImageView,
  StyledView,
  VersionView,
} from './styledComponents'
import { displayJellyBeans as displayJellyBeans } from '../../../../app.json'
import { displayName as displayName } from '../../../../app.json'

export interface BrandWrapperProps {
  version: string 
  hideVersion?: boolean
}

/**
 * Component to display branded view with animated shapes
 *
 */
const BrandWrapper = ({version, hideVersion}: BrandWrapperProps) => {
  const { appLanguage } = useContext(LocalizationContext)
  const dispNameWithoutSp = displayName.toLowerCase().replace(/ /g, '')

  return (    
    <StyledView>
      {displayJellyBeans === true && (
        <BlueShapeView>
          <AnimatedBlueShape />
        </BlueShapeView>
      )}
      <ImageView testID={`splash_image_logo_${dispNameWithoutSp}`}>
        {appLanguage === 'en' ? <GscLogo /> : <GscLogoFr />}
      </ImageView>
      {displayJellyBeans === true && (
        <GreenShapeView>
          <AnimatedGreenShape />
        </GreenShapeView>
      )}
      {!hideVersion && (
        <VersionView>
          <Type bold>Version {version}</Type>
        </VersionView>
      )}
    </StyledView>    
  )
}

export default BrandWrapper

Login.tsx #

import VersionCheck from 'react-native-version-check'
import DeviceInfo from 'react-native-device-info'
import { Alert, Button, BrandWrapper } from 'common/components'
//import BrandWrapper from 'common/components/BrandWrapper'
import IDCardButton from 'common/components/IDCardButton'
import { LocalizationContext } from 'common/components/Translations'
import { withBioAuth } from 'common/hoc/withBioAuth'
import { BioAuthProps } from 'common/interfaces/Biometrics'
import { getStoreAndPersistor } from 'common/store'
import { setLoggedIn, setLogout } from 'common/store/slices/auth/auth'
import { idCardSelectors } from 'common/store/slices/idCard/idCard'
import { themeSpacing } from 'common/style/theme'
import JailMonkey from 'jail-monkey'
import React, {
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
} from 'react'
import { Platform, View } from 'react-native'

import {
  LoginButtonView,
  StyledView,
  TextButtonsContainer,
} from './styledComponents'
import { handleOpenLink } from 'common/helperFunctions/navigationHelpers'

import { get } from 'lodash'
import { AlertProps } from 'common/components/Alert'
import { InAppBrowser } from 'react-native-inappbrowser-reborn'
import {
  androidAppId,
  iOSBundleId,
  registerRedirectScheme,
} from '../../../../app.json'


import PopupControllerInfoIcon from 'common/components/PopupControllerInfoIcon'

const APP_ID = Platform.OS === 'ios' ? iOSBundleId : androidAppId
const REGISTER_REDIRECT_URI = `${registerRedirectScheme}://register`

const Login = ({
  showBioAuthLogin,
  showBioAuthFailed,
  acknowledgeBioAuthFailed,
  biometricPrompt,
  biometricLogin,
}: BioAuthProps) => {
  

  return (
    <StyledView testID="screen_login">
     
      {!!alertProps && <Alert {...alertProps} />}
      <BrandWrapper hideVersion={true} version=""/>
      {showIdCardButton && <IDCardButton addSafeAreaTopMargin={true} />}
    </StyledView>
  )
}

export default withBioAuth<BioAuthProps>(Login)

排查与解决 #

1. 优先检查组件导入方式 #

Login.tsx中通过集合导入BrandWrapper，但注释了单独导入的方式。如果common/components的index导出文件中，BrandWrapper被错误导出为数字（比如导出了同名常量而非组件），会直接触发错误：

• 打开common/components的index文件，确认导出语句为：

  export { default as BrandWrapper } from './BrandWrapper'
  

• 临时改用单独导入（取消注释import BrandWrapper from 'common/components/BrandWrapper'，并从集合导入中移除BrandWrapper），验证问题是否解决。

2. 检查SVG组件兼容性 #

RN 0.71对react-native-svg版本要求更高，直接导入的.svg文件可能未被正确解析为React组件：

• 升级react-native-svg到适配RN 0.71的最新版本
• 临时将<GscLogo />和<GscLogoFr />替换为普通<Text>组件，若错误消失，说明SVG组件解析存在问题。

3. 检查Type组件的bold属性 #

<Type bold>Version {version}</Type>中，若Type组件对bold属性处理不当（比如接受数字类型或返回非JSX元素），会导致渲染错误：

• 查看Type组件实现，确认bold为布尔属性，且组件返回合法JSX
• 临时替换为<Text style={{fontWeight: 'bold'}}>Version {version}</Text>测试。

4. 验证styled-components兼容性 #

旧版本styled-components可能与RN 0.71不兼容：

• 升级styled-components到v6及以上版本
• 检查StyledView、ImageView等样式组件的定义，确保无语法错误。

5. 检查app.json导入值的类型 #

从app.json导入的displayJellyBeans若为字符串"true"而非布尔值true，虽不会直接引发当前错误，但可能导致逻辑异常，建议确认其类型为布尔值。

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