react-native-svg-transformer: 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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 18 (2 by maintainers)

Most upvoted comments

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

+62

youcefislam on Aug 7, 2020

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);

+12

dilipchandima on Aug 1, 2019

Cant import SVG My metro.config.js 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"]
        }
    };
})();

My Svg file is stored in rootdir/images/cal_burning_icon.svg Contents:

<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="31">
<rect y="0.0563965" width="30" height="30" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8766 10.1314C20.2901 8.0512 21.2621 8.97247 21.8873 9.65503C26.5857 14.7821 28.3515 23.1311 22.7965 27.6168C17.1188 32.2017 6.39418 30.1623 4.77289 22.8675C3.80322 18.5117 4.85211 13.8297 7.03256 9.97425C7.07897 9.89221 7.13042 9.80772 7.1859 9.72335C7.47495 9.28395 8.14116 9.37876 8.31331 9.87569C8.95263 11.721 10.1294 12.713 10.1294 12.713C10.187 8.74073 11.7382 5.21232 14.5643 2.64685C14.8601 2.37837 15.3329 2.56529 15.3656 2.96332C15.585 5.63027 16.7273 7.22444 17.0492 7.62545C17.9095 8.69731 18.8225 10.287 19.1259 11.8229C19.4075 11.3839 19.736 10.8387 19.8766 10.1314ZM18.6855 15.3393C18.9909 13.8028 19.7088 14.4834 20.1705 14.9875C23.641 18.7745 24.9452 24.9412 20.8423 28.2544C16.6486 31.641 8.72717 30.1346 7.52963 24.7465C6.81344 21.5291 7.58816 18.071 9.19873 15.2233C9.23301 15.1627 9.27104 15.1002 9.31199 15.0379C9.52545 14.7134 10.0176 14.7834 10.1447 15.1504C10.6169 16.5135 11.4861 17.2461 11.4861 17.2461C11.5286 14.3122 12.6744 11.7059 14.7618 9.81108C14.9802 9.6128 15.3294 9.75078 15.3536 10.0448C15.5157 12.0148 16.3594 13.1922 16.5971 13.4884C17.2325 14.2801 17.9069 15.4543 18.1311 16.5887C18.3389 16.2645 18.5817 15.8617 18.6855 15.3393Z" fill="#fff"/>
<path d="M18.4271 20.4126C18.1314 20.0898 17.6718 19.6541 17.4762 20.6378C17.4097 20.9723 17.2544 21.2302 17.1212 21.4378C16.9776 20.7114 16.5459 19.9596 16.1391 19.4528C15.9869 19.2631 15.4467 18.5092 15.3428 17.248C15.3273 17.0597 15.1037 16.9715 14.9639 17.0983C13.6275 18.3115 12.8938 19.9802 12.8666 21.8586C12.8666 21.8586 12.3101 21.3895 12.0078 20.5169C11.9263 20.2818 11.6113 20.2369 11.4747 20.4448C11.4484 20.4847 11.4242 20.5247 11.4023 20.5635C10.3711 22.3869 9.87508 24.6009 10.3336 26.6609C11.3779 31.3591 19.9373 31.2167 20.4624 25.9607C20.6366 24.2079 19.962 22.0875 18.4271 20.4126Z" fill="#FF8B02"/>
<path d="M10.8165 4.04341C12.0836 3.01281 12.0808 1.08466 10.8165 0.0563965C9.54938 1.08694 9.55214 3.01515 10.8165 4.04341Z" fill="#fff"/>
<path d="M26.0028 12.3151C27.2699 11.2845 27.2671 9.35639 26.0028 8.32812C25.4236 8.7991 24.7385 11.2869 26.0028 12.3151Z" fill="#fff"/>
<path d="M3.56126 13.0996C4.47444 12.3568 4.47245 10.9672 3.56126 10.2261C3.14389 10.5655 2.65006 12.3585 3.56126 13.0996Z" fill="#fff"/>
<path d="M19.3755 6.91671C20.2887 6.17392 20.2867 4.78437 19.3755 4.04321C18.4623 4.78595 18.4644 6.17562 19.3755 6.91671Z" fill="#fff"/>
</g>
</svg>

My very simple component is:

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import CalIcon from '../../images/cal_burning_icon.svg'
export default class TestC extends Component {
    render() {
        return (
            <View style={{flex:1}}>
              <CalIcon height="20" width="20" />   
            </View>
        )
    }
}

error i am getting. i verified that react-native-svg-transformer & react-native-svg are properly installed, but still i am getting this error

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 `TestC`

anyone know how to fix. tried above answers. didn’t fix my issue

parmarkamlesh on May 24, 2021

Does not work for me.

hugoh59 on Jan 27, 2021

Cant import SVG

@parmarkamlesh I just tested your example with a fresh React Native install, and it’s working just fine. I have a feeling that you might have forgotten to restart the packager after making your changes.

after I restart the project, it works. So everyone, after you edit the file, restart the whole project.

Vuinfang on Aug 10, 2021

Cant import SVG

@parmarkamlesh I just tested your example with a fresh React Native install, and it’s working just fine. I have a feeling that you might have forgotten to restart the packager after making your changes.

kristerkari on Jul 11, 2021

@Simek @julioxavierr I would suggest not to use the mergeConfig function if it is not needed. So I guess that you could use just a single config instead.

kristerkari on Oct 15, 2019