未捕获错误：元素类型无效：需要一个字符串，但得到：数字 - Expo - SVG 图标

Question

我在我的世博会项目中使用 Typescript 使用 SVG 图标， 所有 SVG 图标都已成功加载，但我不知道我做了什么，突然我开始在所有平台上收到此错误。

错误：

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: number.

Check the render method of `TabIcon`.

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

Check the render method of `TabIcon`.

package.json

  "dependencies": {
"expo": "^49.0.16",
 "expo-asset": "~8.10.1",
 "expo-system-ui": "~2.4.0",
"react-native-svg": "13.9.0",
"react-native-web": "~0.19.6",
 "ts-node": "^10.9.1"
}
,
"devDependencies": {
    "@babel/core": "^7.20.0",
    "@jest/types": "^29.6.3",
    "@svgr/cli": "^8.1.0",
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-native": "^12.3.0",
    "@types/jest": "^29.5.6",
    "@types/react": "~18.2.14",
"react-native-svg-transformer": "^1.1.0",
    "ts-jest": "^29.1.1",
    "typescript": "^5.1.3"
}

metro.config.ts

/* eslint-env node */
const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

config.resolver.sourceExts.push('cjs');
  return config;
})();

index.tsx //在 src/assets/icons 中

export {default as DealerStore} from './dealerStore.svg'
export {default as Home} from './home.svg'
//the rest of ...

TabIcon.tsx //我的图标被消耗的地方

import React,{useState} from 'react'
import { Pressable,StyleSheet, Text, View,Image ,StyleProp,  ViewStyle, TextStyle } from 'react-native';
   import SVG from 'react-native-svg';
import  Icon ,{IconProps} from '../Icon';
import {FONT,SIZES ,COLORS } from '../../constants'
import {Home,DealerStore,Setting,Favourite,Dashboard,Orders,
  Cart,Dealers,Chat,Profile,AdminStore}  from '../../assets/icons'



type TabIconProps = {
  onPress?(): void 
focused:boolean
iconName:string
 id?:string
}

const getTabIcon = (type:string) => {
    switch (type) {
      case 'Home':
        return Home 
    case 'Dashboard':
        return Dashboard ;
      case 'DealerStore':
        return DealerStore;
    case 'AdminStore':
        return AdminStore;
      case 'Favourite':
        return Favourite;
     case 'Setting':
        return Setting;
      case 'Profile':
        return Profile;
      case 'Dealers':
        return Dealers;
     case 'Orders':
        return Orders;
    case 'Cart':
        return Cart;
    case 'Chat':
        return Chat;
      default:
        return Home;
    }
  };
const TabIcon:React.FC<TabIconProps> = ({focused,iconName,onPress,id}) => {

  const TabIcon= getTabIcon(iconName)
  return (
   
      <TabIcon fill={focused ? COLORS.white:COLORS.darkgray}
                     height={SIZES.medium} 
                    width={SIZES.medium}  
                     />

  )
}





const styles = StyleSheet.create({
  button: {
          width:20,
          justifyContent: "center",
          alignItems: "center",
  },
});
export default TabIcon

declarations.d.ts // 在根目录中

declare module "*.svg" {
    import React from "react";
    import { SvgProps } from "react-native-svg";
    const content: React.FC<SvgProps>;
    export default content;
  }

我尝试过的解决方案

1_ 我从根目录移出了 declarations 文件

2_直接导入SVG图标到TabIcon.tsx组件中 像那样

import Home  from '../../assets/icons/home.svg'

仍然遇到同样的错误

任何帮助将非常感激。

Answer 1

我也遇到了同样的问题，请问你解决了吗？你能与我分享解决方案吗？