Error on load image on React-native: Unexpected character

[fuechter]

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>
    )
}

[seanfuture]

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]

Seems related to image map as noted here in this issue enzymejs/enzyme#253

[seanfuture]

Other potentials ( unlikely related to image map after all ):

• (Webpack) Fail to load PNG (or any other) images RickWong/react-isomorphic-starterkit#41
• Can't require images with webpack on the backend gpbl/isomorphic500#59

[sylvainbaronnet]

Same problem, fixed by re-exporting image as @seanfuture said

[sylvainbaronnet]

Restarting the packager fix it too

[dsibiski]

@facebook-github-bot answered

[facebook-github-bot]

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]

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]

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]

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]

stop the server and execute react-native start again will resolve this problem

[ShashankaNataraj]

@duzliang Stopping and starting the server did get rid of the error message, but Im getting a blank screen now!