Can't import svgs about react-native-svg-transformer HOT 27 CLOSED

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

from react-native-svg-transformer.

@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'."

from react-native-svg-transformer.

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

from react-native-svg-transformer.

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.

from react-native-svg-transformer.

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

from react-native-svg-transformer.

This has been inactive for quite a while, so I guess that the problem got solved.

from react-native-svg-transformer.

@kristerkari Am having same error using RN 0.58, I created the metro.config.js and add the code snippet you gave but am still getting the same error.

@GammelBro how are you able to solve this?

Any help, please.

from react-native-svg-transformer.

@dayaki Can you post your config here or somewhere where I can see it?

from react-native-svg-transformer.

@dayaki also, have a look at the example app to see how the transformer is used there: https://github.com/kristerkari/react-native-svg-example

from react-native-svg-transformer.

@kristerkari this is the content of my metro.config.js file

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

Note: am using react-native-cli and not expo, also React native v0.58. Looking at your example app, I dont have a webpack.config.js, does it matter? Should I create it?

from react-native-svg-transformer.

@dayaki Thewebpack.config.js is only used to render the same code for Web.

Your config looks fine, so the issue is probably somewhere else.

from react-native-svg-transformer.

Good that you got your problem solved 👍 Let me know if you run into any other issues.

from react-native-svg-transformer.

@danbockapps I have a working example that has Expo 32 and react-native-svg-transformer installed.

You can compare your own project to it:
https://github.com/kristerkari/react-native-svg-expo-example

from react-native-svg-transformer.

I forked react-native-svg-expo-example and successfully added TypeScript using the Expo instructions. I submitted pull request #21 on this project to add the declaration to the readme.

I'm still getting the error on my existing project, so I still need to figure out what the difference is there. Thanks for your help!

from react-native-svg-transformer.

I figured out my error - it was because I had react-native-typescript-transformer installed even though I don't need it (because I'm using Expo). I had installed TypeScript using TypeScript's instructions for adding TypeScript to a React Native project when I should have used Expo's instructions for adding TypeScript to an Expo project. I uninstalled react-native-typescript-transformer and I can see SVGs in my app now.

from react-native-svg-transformer.

@danbockapps Good that you got your problem solved. react-native-typescript-transformer is not needed in Expo or React Native if the version is at least 0.57.x, but it was used for older versions to get Typescript to work.

from react-native-svg-transformer.

Just wanted to comment on Typescript + Expo. Expo still (SDK v33) uses Babel for transforming for TS, so some TS features remain unavailable. Details: https://github.com/ds300/react-native-typescript-transformer#babel-caveats

So using multiple transformers was working solution for me in the case of using Typescript features like Namespaces.

from react-native-svg-transformer.

Just wanted to comment on Typescript + Expo. Expo still (SDK v33) uses Babel for transforming for TS, so some TS features remain unavailable. Details: https://github.com/ds300/react-native-typescript-transformer#babel-caveats

So using multiple transformers was working solution for me in the case of using Typescript features like Namespaces.

Sure, for most users it's enough to use Babel's TS, but yeah there are some special features left out that some users might need.

from react-native-svg-transformer.

I am getting the exact same error for web (ios and android work just fine)

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/cr-image.e8dcca4c.svg') is not a valid name.

from react-native-svg-transformer.

@Sankalp-Saxena @cj are you guys using Expo? I think that that is a different error.

from react-native-svg-transformer.

@kristerkari Yes i am using expo and on web developer mode it cannot find that svg.

from react-native-svg-transformer.

any solution to this?
I am having same error using expo web

from react-native-svg-transformer.

Same issue in bare react-native project 0.63.2 (without typescript)

from react-native-svg-transformer.

Same issue. My declarations.d.ts is in the root.
Package 0.14.3 (currently latest)
Typescript 4.0.3
RN 0.63.3

from react-native-svg-transformer.

My issue was fixed by NOT putting the declarations.d.ts file in the root
Here's my PR by mentioning this in the README #109

from react-native-svg-transformer.

Working with Expo … same error. PLZ help.

from react-native-svg-transformer.

My issue was fixed by NOT putting the declarations.d.ts file in the root
Here's my PR by mentioning this in the README #109

Where should we put it?

from react-native-svg-transformer.