react-native-svg-transformer: Unhandled Rejection (InvalidCharacterError): Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/....svg') is not a valid name.
src/index.js
import React from 'react'
import { View } from 'react-native'
import User from '../assets/svg/User.svg'
const Index = () => {
return (
<View>
<User width={40} height={40} fill='red'/>
</View>
)
}
export default Index
metro.config.js
const { getDefaultConfig } = require("@expo/metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig(__dirname);
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
declarations.d.ts
declare module "*.svg" {
import React from 'react';
import { SvgProps } from "react-native-svg";
const content: React.FC<SvgProps>;
export default content;
}
.svgrrc
{
"replaceAttrValues": {
"#000": "{props.fill}"
}
}
app.json
{
"expo": {
"name": "Project",
"slug": "Project",
"version": "3.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#007B5E"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"android": {
"package": "com.ico.app.teste",
"googleServicesFile": "./google-services.json",
"useNextNotificationsApi": true,
"versionCode": 100,
"permissions": [
"ACCESS_COARSE_LOCATION",
"ACCESS_FINE_LOCATION"
]
},
"ios": {
"supportsTablet": true
},
"web": {
"favicon": "./assets/favicon.png"
},
"packagerOpts": {
"config": "metro.config.js",
"sourceExts": [
"expo.ts",
"expo.tsx",
"expo.js",
"expo.jsx",
"ts",
"tsx",
"js",
"jsx",
"json",
"wasm",
"svg"
]
}
}
}
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@expo-google-fonts/montserrat": "^0.1.0",
"@react-native-async-storage/async-storage": "^1.13.0",
"@react-native-community/masked-view": "0.1.10",
"@react-native-community/netinfo": "6.0.0",
"@react-native-community/viewpager": "5.0.11",
"@react-navigation/bottom-tabs": "^5.9.0",
"@react-navigation/native": "^5.7.2",
"@react-navigation/stack": "^5.8.0",
"@types/styled-components-react-native": "^5.1.1",
"axios": "^0.19.2",
"expo": "~41.0.1",
"expo-cli": "^3.23.1",
"expo-facebook": "~11.0.5",
"expo-font": "~9.1.0",
"expo-linear-gradient": "~9.1.0",
"expo-linking": "~2.2.3",
"expo-location": "lucassouza16/expo-location#latest",
"expo-notifications": "~0.11.6",
"expo-status-bar": "~1.0.4",
"git": "^0.1.5",
"global": "^4.4.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-gesture-handler": "~1.10.2",
"react-native-masked-text": "^1.13.0",
"react-native-reanimated": "~2.1.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.0.0",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-web": "~0.13.12",
"react-native-webview": "11.2.3",
"styled-components": "^5.2.1"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"@types/jest": "^26.0.21",
"@types/react": "^17.0.3",
"@types/react-native": "^0.64.0",
"@types/react-test-renderer": "^17.0.1",
"babel-preset-expo": "^8.3.0",
"typescript": "^4.2.3"
},
"private": true
}
Expo CLI 4.4.3 environment info: System: OS: Windows 10 10.0.19042 Binaries: Node: 14.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - C:\Users\lucas\AppData\Roaming\npm\yarn.CMD npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 4.0.0.0 AI-193.6911.18.40.6626763 npmPackages: expo: ~41.0.1 => 41.0.1 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2 react-native-web: ~0.13.12 => 0.13.18 Expo Workflow: managed
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 21 (5 by maintainers)
@lucassouza16 @cvburgess @mattgabor
I had a look at adding the Webpack config for Expo, and I managed to find a solution from the Expo repo (https://github.com/expo/expo/issues/6660#issuecomment-667991626) that is kind of working.
The only bigger problem that I ran into is that the newest versions of SVGR only support Webpack v5, but Expo is still using Webpack v4. I managed to fix that in hacky way by using an older 5.5.0 version of
@svgr/webpack, but forcing the other@svgr/*packages to be version 6.1.2.If you want to have a look at an example, you can try out locally the changes here: https://github.com/kristerkari/react-native-svg-expo-example/pull/1/files
I created a temporary solution to the problem, whoever wants to try it feels free.
https://github.com/lucassouza16/react-native-svg-transformer-fix-expo
Oh, I see. Well I’ll try it out and report back to you 😃
I would definitely be interested in fixing the support for Expo web, but I’m not sure how.
I have created a Webpack config that works with the normal React Native, but I have no idea of how to configure it for Expo.
Here’s a reference for normal RN in case it helps: https://github.com/kristerkari/react-native-svg-example/blob/master/webpack.config.js
I believe that this is no longer a library error, but the Expo version or cache, I ran my application in Web, in the Android emulator and in the iOS simulator using the latest version of the lib and the solution that the author suggested, and not gave no problem, my sdk is 39.
I forked the dependency and applied a solution proposal, if I find it interesting as a final solution: https://github.com/lucassouza16/react-native-svg-transformer
It was a temporary solution that I created for a project that was urgent to be completed, and I found it interesting to share, but little by little I’m not using this library to render svgs, and replacing it in the project with the conventional way, I thought that at this point this problem had already been resolved, but it seems that the author abandoned the project.