With Expo web: Failed to execute 'createElement' on 'Document'

Hello,

I am using Expo 39’s managed workflow.

I followed the installation instruction, created the metro.config.js file, and copy-pasted the content from the instructions. I also added the packagerOpts field to my app.json.

For testing purpose, I renamed my SVG file to logo.svg and used the following code in my app:

import Logo from "../../assets/images/avatars/logo.svg"

function TestComp() {
	const size = 120;
	return <Logo width={size} height={size}/>
}

Unfortunately, I am now getting the error: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.6a5b59b1.svg') is not a valid name.

Any idea about what is causing the error?

I don’t know if it is related, but I do have a babel.config.js file in my root folder.

[DrimZ]

encountered the same issue,

i solve this by adding babel-plugin-inline-react-svg as dev dependencies

then add this to your babel.config.js

{ "plugins": [ "inline-react-svg" ] }

thanks to this guy https://github.com/boopathi/react-svg-loader/issues/197#issuecomment-377562447

[lucassouza16]

@DrimZ usou essa solução, embora faça a web expo funcionar, ela quebra o simulador ios e android.

O erro: Invariant Violation: View config getter callback for component caminho must be a function (received 'undefined'). Make sure to start component names with a capital letter.

I created a temporary solution focused on the problem related to Expo, if you want you can take a look:

https://github.com/lucassouza16/react-native-svg-transformer-fix-expo