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 Home.

[fatcatt]

Question

environment： react native: 0.72.7 xcode: Version 15.4 react-native-svg: "^15.4.0", react-native-svg-transformer: "^1.5.0",

my metro.config.js config

and my error tips:

I observed that a similar issue has been raised two weeks ago, but the issue has been closed and I did not find the exact solution there. Has anyone encountered a similar situation? How should we solve it, thanks

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description, Steps to reproduce, Snack or a link to a repository, SVG version, React Native version and Platforms sections.

[bohdanprog]

Hello @fatcatt, Could you please provide a simple example to reproduce the issue you refer to? Additionally, could you share more details about the issue you are talking?

Thank you.

[lukachi]

Expo environment

devDeps: "react-native-svg": "15.2.0", "react-native-svg-transformer": "^1.5.0",

metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const withSvgTransformer = (config) => {
  const { resolver, transformer } = config;

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

  return config;
}

module.exports = (() => {
  let config = getDefaultConfig(__dirname, { isCSSEnabled: true })

  config = withSvgTransformer(config)
  // config = withCircomFilesAndPolyfills(config)

  config = withNativeWind(config, { input: './src/theme/global.css' })

  return config
})()

usage:

import WarningIcon from '@assets/icons/warning-icon.svg'

<WarningIcon />

results in:

 (NOBRIDGE) ERROR  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

but sometimes, after several app reloads - it start to work, but only once

[bohdanprog]

Hello @lukachi, Can you please provide a full example of that problem? Thank you.

[lukachi]

Hi @bohdanprog , which details should i provide?

Also want to note, that i'm using newArch

[bohdanprog]

@lukachi, it would be great if you could create a repository with your example app. This will help us in resolving the issue.

Thank you.

[lukachi]

sure,

here is the repo i'm currently working on

but now i've got this error after updating to new expo sdk :) so, the things just have got worse)

currently keeping an eye on this issue discussion

[trojanyao]

I encountered the same issue when using <Filter>.

• react-native: 0.73.6
• react-native-svg: 15.4.0

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[bohdanprog]

@lukachi, here is a screen from my app that I set up.

here is an example

[jakex7]

I encountered the same issue when using <Filter>.

• react-native: 0.73.6
• react-native-svg: 15.4.0

Hi @trojanyao, are you using expo go by any chance? If yes, then you'd have to use prebuilt or wait for Expo team to update the react-native-svg package in the app. Otherwise, if you're not using expo, please create the new issue and place your minimal reproduction repository there.

[trojanyao]

@jakex7 Ya, I'm using Expo. Thanks for pointing that out. I got it.

[lukachi]

@bohdanprog Hi again, sorry for late respond

i've migrated my app from expo-router to 'react-navigation/native', so app starts fine now. Could you please run my app from migrate/new-arch branch?

There you can see, that imported svg files become an empty object, and also if svg files will be imported and used straightfully - it will cause the error in this issue topic, but after reload app several times, there will be a chance that it starts to work, but once through several reloads

https://github.com/lukachi/rn-template/blob/migrate/new-arch/src/ui/UiIcon.tsx

[bohdanprog]

Hi @lukachi :) Can you give me more context on whether its problem appears in android or ios, new or old arch? And also IDK how to set up your project.

[lukachi]

Hi @bohdanprog it's finally works

For me, the solution was requiring components instead of import, idk why :)

and also i've used babelTransformerPath: require.resolve("react-native-svg-transformer") instead of babelTransformerPath: require.resolve("react-native-svg-transformer/react-native") or babelTransformerPath: require.resolve("react-native-svg-transformer/expo")

here is commit: https://github.com/lukachi/rn-template/commit/05e17182ca2ca4f8363c0decd2f39fe596a698de

[bohdanprog]

Hi @lukachi :)

I'm glad to hear that! 👍 I believe it depends on how the project is configured, similar to how I set it up in my example. Please feel free to reach out to us. We would be delighted to help you in the future. 😉

[bohdanprog]

@fatcatt Can we close that issue? Or do you still have some problem with that?

[lukachi]

thank u @bohdanprog

I think we can close this issue but it would be great if in docs would be several examples for different cases like that.

[bohdanprog]

@lukachi The issue wasn't with react-native-svg but with the configuration of react-native-svg-transformer. Perhaps I overlooked something.