react-native-svg-transformer: Can't import svgs

If I want to import my svg like import Star from '../../assets/svgs/pinnedStar.svg'; I get this error

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

my rn-cli.config.js:

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

module.exports = mergeConfig(
  async () => {
    const {
      resolver: { sourceExts, assetExts },
    } = await getDefaultConfig();
    console.log(sourceExts);

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 7
Comments: 27 (16 by maintainers)

Most upvoted comments

@kristerkari svg image is opening on devices but not on web getting following error,

DOMException: Failed to execute ‘createElement’ on ‘Document’: The tag name provided (‘/static/media/events-qengage.89418f90.svg’) is not a valid name.

Sankalp-Saxena on May 28, 2020

@kristerkari I got the same error as in the OP when trying to add this to my Expo/TypeScript project. This is with Expo 32 (which is RN 0.57). I had added the metro.config.js in the project root alongside app.json (didn’t have that file before) and added the packagerOpts section to app.json.

TypeScript also complains about the import statement. “Cannot find module ‘…/assets/search.svg’.”

danbockapps on May 11, 2019

@danbockapps and for typescript you might need to do declare module "*.svg";, I’m not sure, but you can try that.

kristerkari on May 12, 2019

I started a new RN app and it worked out of the box. Thanks

dayaki on Mar 2, 2019

Thanks @GammelBro!

I think that what’s wrong in your config is that the typescript transformer is overwriting the svg transformer from the other config.

If you want to use multiple transformers, then you need to merge the settings for extensions for both transformers + create a separate transformer file and call the transformer based on the file type, e.g. https://github.com/kristerkari/react-native-css-modules/blob/master/docs/multiple-transformers.md#step-3-configure-transformer

By the way… if you are using React Native 0.57.x or newer, then you don’t need the Typescript transformer, which means that you can use the default config for this library.

kristerkari on Feb 4, 2019