Error on load image on React-native: Unexpected character #6691
Description
react-native-cli: 0.1.10
react-native: 0.22.2
SO Mobile: Android
SO: Mac
I'm try display a image on a component on React-native, but I don't know why this error happens...
Example of code:
render () {
let { convenience } = this.props
return (
<View style={{flexDirection: 'row', height: 50}}>
<Text style={{marginRight: 30}}>{convenience.name}</Text>
<Image source={require('./icons___favorito_ativo.png')} />
</View>
)
}
Reacted by Akshar Patel, Dan Wilt, Idris Mokhtarzada, Anton Kulikalov, Leopold Joy, Enes Kaya, michaeljonathan, Vadorequest, Sam Corcos, Abe Clark and 40 more
Activity
seanfuture commentedon Mar 28, 2016
Get the same error but only when overwriting an image already loaded and cmd-r is pressed. To resolve the issue temporarily it seems the image must be re-exported / overwritten and then a 2nd cmd-r to reload results in clearing the error message. Happens regularly at the moment for myself at least. Haven't had time to research further.
seanfuture commentedon Mar 29, 2016
Seems related to image map as noted here in this issue enzymejs/enzyme#253
seanfuture commentedon Mar 29, 2016
Other potentials ( unlikely related to image map after all ):
sylvainbaronnet commentedon Mar 29, 2016
Same problem, fixed by re-exporting image as @seanfuture said
sylvainbaronnet commentedon Mar 29, 2016
Restarting the packager fix it too
dsibiski commentedon Mar 30, 2016
@facebook-github-bot answered
facebook-github-bot commentedon Mar 30, 2016
Closing this issue as @dsibiski says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.
seanfuture commentedon Mar 30, 2016
FYI - StackOverflow link: http://stackoverflow.com/questions/36252381/error-on-load-image-on-react-native-unexpected-character/36289632#36289632 .. Don't believe this issue should have been closed as the above mentioned "fixes" aren't really fixes - Instead they're workarounds. Error still comes up often and a full restart of the packager is needed. Most definitely a prevalent and serious bug in the packager. Taken a brief look, but packager code doesn't immediately reveal the cause although my suspicion is that Node.js is trying to process the file / file change as an asset.
yashvekaria commentedon Apr 15, 2016
I too faced the same error. After a lot of trying, I restarted the packager, and the app picked up the image. So the solution is: Restart the packager.
Hope this helps.
zipzit commentedon Apr 23, 2016
I know this is going sound pretty weird, but I'm going to add this comment in case anybody else gets here. I created a index.ios.js file by copying a simple sample from an internet example (actually something at https://rnplay.org) I kept getting "unexpected character" errors. I'm using Atom.io as my script tool. I was thinking perhaps I had an encoding issue with the wrong character set. I've confirmed I'm using UTF-8
So I was using the (left/right) arrow keys on my keyboard, and I notice the cursor would stop moving for two keyboard arrow pushes, right at the location identified in my Emulator Red Screen of Disaster. It was like there were two invisible characters in my code. I played with this for a pretty long time to confirm. I was able to highlight the "hidden" characters and delete them.
After deletion, the new code works great.
Bizarre. Not sure what was there. (Note: I copied the Slider Example Code from https://rnplay.org/apps/5FsfPA and I used a "Select All" and Command-C to do the copying and Command-V to paste... if anybody wants to repeat the experiment)
And yes, I know how silly this sounds. Perhaps others have hit the same roadbump?
duzliang commentedon Aug 26, 2016
stop the server and execute
react-native startagain will resolve this problemShashankaNataraj commentedon Oct 16, 2016
@duzliang Stopping and starting the server did get rid of the error message, but Im getting a blank screen now!
35 remaining items
mr-bat commentedon Jul 10, 2017
I solved(!?) this problem by creating a copy of the image and replacing the original one, then renamed the image. This indeed is a weird bug, your photo at once becomes useless.
ShubhamOjha commentedon Jul 27, 2017
Closing the server and restarting it works just fine.
Rebaiahmed commentedon Jul 31, 2017
@sylvainbaronnet thanks it's working for me 👍
jan-happy commentedon Aug 1, 2017
@ShubhamOjha: I don't think this is really a solution. One nice thing about react native is the hot reloading feature. Which is made completely useless if you use images in your project that change during development.
milon87 commentedon Aug 9, 2017
faced the same problem and solved by renaming the .png to .jpg and it works.
I don't know what's wrong with the .png file extension.
paranoidjk commentedon Sep 1, 2017
same problem here, any process?
gblaender commentedon Sep 1, 2017
Same problem, but nothing worked. Killed and restarted the packager, replaced the image... Same unexpected character red screen. Really frustrating.. Newbie dev here :)
cpojer commentedon Sep 1, 2017
This is fixed for the next release of react-native, where we have many HMR improvements. cc @grabbou can tell you when that goes out but in your current version of react-native it isn't magically going to be fixed from one minute to the next.
danilags commentedon Sep 11, 2017
Try terminate your terminal server and react-native run-android / ios 🗡
mingsong2 commentedon Sep 18, 2017
As @danilags says
rm -fr $TMPDIR/react-*clear the react-native cachehope this helps you
jgreen01su commentedon Nov 27, 2017
tl;dr Always use
.pngnot.PNGI had this same issue. Using an uppercase
PNGfile extension will also case this error.norby3 commentedon Mar 27, 2018
foobar.JPG causes this really annoying error
foobar.jpg works
.. lotta people wasted a lot of time .. not a confidence booster