Element type is invalid: expected a string(for built-in components) or a class/function

[TamasFarago]

This is my code:

metro.config: module.exports = { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false, }, }), }, };

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => { const { resolver: { sourceExts, assetExts } } = await getDefaultConfig(); return { transformer: { babelTransformerPath: require.resolve("react-native-svg-transformer") }, resolver: { assetExts: assetExts.filter(ext => ext !== "svg"), sourceExts: [...sourceExts, "svg"] } }; })();

My component: import Logo from "../assets/closeModal.svg"

[raymondjacobson]

everything is working for me: "react-native": "0.63.4", "react-native-svg": "^12.1.0", "react-native-svg-transformer": "^0.14.3",

Metro config is

const { getDefaultConfig } = require("metro-config")

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig()
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false
        }
      }),
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  }
})()

Make sure to restart metro after installing!! (i.e. quit the terminal session that is running metro)

[SaltedBlowfish]

@TamasFarago I'm having the same error. Any luck?

[TamasFarago]

@TamasFarago I'm having the same error. Any luck?

I ended up using this method: https://www.youtube.com/watch?v=d1YFH3ifw2A&t=229s You can import import Svg, { Circle, Ellipse, G, Text, TSpan, TextPath, Path, Polygon, Polyline, Line, Rect, Use, Image, Symbol, Defs, LinearGradient, RadialGradient, Stop, ClipPath, Pattern, Mask, } from 'react-native-svg';

[SaltedBlowfish]

@TamasFarago Thanks. I ended up simplifying my metro config to match exactly what the documentation shows and it's fine for now. Not sure if it will break my other SVG requirements from the UI package, however.

[jcde]

everything is working for me: "react-native": "0.63.4", "react-native-svg": "^12.1.0", "react-native-svg-transformer": "^0.14.3",

Metro config is

Make sure to restart metro after installing!! (i.e. quit the terminal session that is running metro)

for me it works on native, but not on web

[EnzoPortela]

everything is working for me: "react-native": "0.63.4", "react-native-svg": "^12.1.0", "react-native-svg-transformer": "^0.14.3",

Metro config is

const { getDefaultConfig } = require("metro-config")

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig()
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false
        }
      }),
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  }
})()

Make sure to restart metro after installing!! (i.e. quit the terminal session that is running metro)

For me it works! Thanks!

[prasanna-col]

"react-native": "0.68.2", "react-native-svg": "^12.1.0", "react-native-svg-transformer": "^0.14.3"

In metro.config.js

const { getDefaultConfig } = require("metro-config") module.exports = (async () => { const { resolver: { sourceExts, assetExts } } = await getDefaultConfig() return { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false } }), babelTransformerPath: require.resolve("react-native-svg-transformer") }, resolver: { assetExts: assetExts.filter(ext => ext !== "svg"), sourceExts: [...sourceExts, "svg"] } } })()

Even if I try this with reset cache, I'm getting the same error. I can't render the SVG file

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

[feyyum]

npm i react-native-svg npm i react-native-svg-transformer Then, For React Native 0.68.2, delete every line of metro.config.js file. And paste this: (Rebuild your app!)

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

This might work!

[ChukwuebukaN]

npm i react-native-svg npm i react-native-svg-transformer Then, For React Native 0.68.2, delete every line of metro.config.js file. And paste this: (Rebuild your app!)

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

This works, thanks a lot... 🥂

[MikeAlvarado]

npm i react-native-svg npm i react-native-svg-transformer Then, For React Native 0.68.2, delete every line of metro.config.js file. And paste this: (Rebuild your app!)

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

This might work! Follow Pooly Carpool on Instagram for thanks!

Works like a charm. Thanks!

[ravimeanstack]

Try this it worked for me ..

const { getDefaultConfig } = require("metro-config");

module.exports = async () => { const { resolver: { sourceExts, assetExts } } = await getDefaultConfig(); return { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: true, }, }), babelTransformerPath: require.resolve("react-native-svg-transformer")
}, resolver: { assetExts: assetExts.filter(ext => ext !== "svg"), sourceExts: [...sourceExts, "svg"]
} };

};

[tkud04]

everything is working for me: "react-native": "0.63.4", "react-native-svg": "^12.1.0", "react-native-svg-transformer": "^0.14.3",

Metro config is

const { getDefaultConfig } = require("metro-config")

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig()
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false
        }
      }),
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  }
})()

Make sure to restart metro after installing!! (i.e. quit the terminal session that is running metro)

This worked for me

[Danu-rxone]

in my case i have another assetExts, that is lottie. so my metro.config.js

"react": "^18.2.0", "react-native": "^0.73.5", "react-native-svg": "^15.0.0",

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const {assetExts, sourceExts} = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */

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

module.exports = mergeConfig(defaultConfig, config);

[Manhha3010]

in my case i have another assetExts, that is lottie. so my metro.config.js

"react": "^18.2.0", "react-native": "^0.73.5", "react-native-svg": "^15.0.0",

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const {assetExts, sourceExts} = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */

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

module.exports = mergeConfig(defaultConfig, config);

Thank you

[natalyayyad]

Hello all, i'm facing same issue for hours can't seem to resolve it :/

npm version: 10.2.3 node version: v20.10.0 react: 18.2.0 react-native: 0.74.5 react-native-svg: 15.2.0 react-native-svg-transformer: ^1.5.0

declaration.d.ts file:

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

metro-config.js file:

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/expo'),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...resolver.sourceExts, 'svg', 'cjs'],
  };

  return config;
})();