Invariant Violation: Element type is invalid

I’m getting the following error when importing SVG’s:

Invariant Violation: 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 `MySVG`.

My metro config: (the one from the example app does not work for me)

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

const svgConfig = (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"]
        }
    };
})();

const defaultConfig = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
            },
        }),
    },
};

module.exports = mergeConfig(svgConfig, defaultConfig);

I can get the example app to work fine. I tried to alter a few things there, to see if I could break it. No clues yet. I suspect this is a config issue.

[youcefislam]

i had the same issue, after i checked the metro.config.js, i found out that i was wrong

old : `

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

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

`

New : `

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"]
        }
    };
})();

`

[dilipchandima]

Heey, the example is working for me but for my application SVG is not working, following configs from my app

"dependencies": {
    "@jumpn/react-native-jetifier": "^0.1.4",
    "appcenter": "^2.2.0",
    "axios": "0.18.0",
    "base-64": "^0.1.0",
    "lottie-ios": "3.0.3",
    "lottie-react-native": "^3.1.0",
    "moment": "^2.24.0",
    "react": "16.8.6",
    "react-native": "0.60.4",
    "react-native-device-info": "^2.3.1",
    "react-native-firebase": "^5.5.6",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-i18n": "^2.0.15",
    "react-native-jumio-mobilesdk": "https://github.com/Jumio/mobile-react.git#v3.1.0",
    "react-native-svg": "^9.5.3",
    "react-native-svg-transformer": "0.12.1",
    "react-native-webview": "^5.12.1",
    "react-navigation": "^3.11.1",
    "react-redux": "^7.1.0",
    "redux": "^4.0.4",
    "redux-persist": "^5.10.0",
    "redux-saga": "^1.0.5"
  },

metro config

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

const svgModule = (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"]
    }
  };
})();

const defaultModule = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

module.exports = mergeConfig(svgModule, defaultModule);