SvgUri example as given in README.md crashes in Expo Web
See original GitHub issueBug
I created a fresh expo app using expo init app-simple
using the Typescript template. Added the SvgUri example.
Resulted in the following error in my console:
(I have to add, the standard Expo <Image> component supports svg if you install react-native-svg. If not, it will skip svg files without warning.)
index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `App`.
at App
at ExpoRootComponent (http://localhost:19007/static/js/bundle.js:8361:83)
at div
at http://localhost:19007/static/js/bundle.js:46754:25
at div
at http://localhost:19007/static/js/bundle.js:46754:25
at AppContainer (http://localhost:19007/static/js/bundle.js:38675:24)
console.<computed> @ index.js:1
react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `App`.
at createFiberFromTypeAndProps (react-dom.development.js:25058:1)
at createFiberFromElement (react-dom.development.js:25086:1)
at createChild (react-dom.development.js:13446:1)
at reconcileChildrenArray (react-dom.development.js:13719:1)
at reconcileChildFibers (react-dom.development.js:14125:1)
at reconcileChildren (react-dom.development.js:16990:1)
at updateHostComponent (react-dom.development.js:17632:1)
at beginWork (react-dom.development.js:19080:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)
at renderRootSync (react-dom.development.js:22670:1)
at performSyncWorkOnRoot (react-dom.development.js:22293:1)
at scheduleUpdateOnFiber (react-dom.development.js:21881:1)
at updateContainer (react-dom.development.js:25482:1)
at react-dom.development.js:26021:1
at unbatchedUpdates (react-dom.development.js:22431:1)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020:1)
at render (react-dom.development.js:26103:1)
at renderApplication (renderApplication.js:23:1)
at Object.run (index.js:49:1)
at Function.runApplication (index.js:93:1)
at registerRootComponent (registerRootComponent.tsx:14:1)
at Module../node_modules/expo/AppEntry.js (AppEntry.js:5:1)
at __webpack_require__ (bootstrap:789:1)
at fn (bootstrap:100:1)
at Object.1 (tracing.js:7:1)
at __webpack_require__ (bootstrap:789:1)
at bootstrap:856:1
at bootstrap:856:1
Environment info
Run react-native info
in your terminal and copy the results here. Also, include the precise version number of this library that you are using in the project
React native info output:
System:
OS: macOS 12.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 387.34 MB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.14.0 - /opt/homebrew/opt/node@16/bin/node
Yarn: 1.22.17 - /opt/homebrew/bin/yarn
npm: 8.3.1 - /opt/homebrew/opt/node@16/bin/npm
Watchman: 2022.02.21.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.2 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8193401
Xcode: 13.3/13E113 - /usr/bin/xcodebuild
Languages:
Java: 17.0.2 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Library version: 12.1.1 (preferred by expo install, but same thing happend with 12.3.0)
Steps To Reproduce
Issues without reproduction steps or code are likely to stall.
- expo init app-simple (use typescript template)
- cd app-simple
- yarn add react-native-svg
- copy the example code for SvgUri into App.tsx
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
<SvgUri
// style={styles.image}
width="100%"
height="100%"
uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
/>
<StatusBar style="auto" />
</View>
);
}
Describe what you expected to happen:
I was expecting the app to show Homer. But it crashed and showed the above error instead.
Issue Analytics
- State:
- Created a year ago
- Reactions:5
- Comments:7
Hi everyone, any idea when it is going to be fixed? Using Image works for me on the web, but not on iOS (have not tried Android)
This is how I do it:
I’m pretty sure I only needed to install react-native-svg. Maybe the remote server needs to send the ‘Content-Type’: ‘image/svg+xml’ ? Mine does.