React-native: Error on load image on React-native: Unexpected character

Created on 28 Mar 2016 · 57Comments · Source: facebook/react-native

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

Ran Commands Locked

Source

fuechter

👍50

Most helpful comment

Restarting the packager fix it too

sylvainbaronnet on 29 Mar 2016

👍259 🎉62 ❤44 😄44 😕30

All 57 comments

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 on 28 Mar 2016

👍12

Seems related to image map as noted here in this issue https://github.com/airbnb/enzyme/issues/253

seanfuture on 29 Mar 2016

👍5

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

seanfuture on 29 Mar 2016

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

sylvainbaronnet on 29 Mar 2016

👍4

Restarting the packager fix it too

sylvainbaronnet on 29 Mar 2016

👍259 🎉62 ❤44 😄44 😕30

@facebook-github-bot answered

dsibiski on 30 Mar 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.

facebook-github-bot on 30 Mar 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.

seanfuture on 30 Mar 2016

👍43

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.

yashvekaria on 15 Apr 2016

👍17 👎3

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?

zipzit on 23 Apr 2016

👍1

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

duzliang on 26 Aug 2016

👍13

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

ShashankaNataraj on 16 Oct 2016

the packager should not require this though -- this is a bug, and even though there's a workaround, it should be fixed. this isn't a SO type question, it's a "please fix the packager"

jaredly on 23 Nov 2016

👍54

Still having this issue. Happened in various occasions, most reliably when I open an image being used in the react native app with preview (hit space bar in finder) on OSX.

tomchambers2 on 12 Jan 2017

felipecocco on 26 Jan 2017

Switching react-native from 40 to 38 helped, i don't think this should have happen

ColdHandz on 27 Jan 2017

Another suggestion is to watchman watch-del-all and running the RN packager server with the --resetCache option.

ColdHandz on 31 Jan 2017

started seeing this today after updating to RN v0.40.0. Tried all the workarounds mentioned in this thread but no luck 😞

radelcom on 2 Feb 2017

👍6

I have this issue as well. Turns out it is because I have spaces in the project path:

This works: /Users/fdb/Desktop/myproject/icons/settings.png
This doesn't: /Users/fdb/Dropbox (Personal)/myproject/icons/settings.png

Running watchman watch-del-all has no effect — only moving to a path without spaces does.

fdb on 21 Feb 2017

👍6 ❤1 🎉1

I had this same error,
When i try stop n start server see this log:

myfile.png: Unexpected character '�' (1:0)

1 | �PNG
| ^
2 |
3 |
4 | IHDR��X��d�IT pHYs.#.#x�?vtEXtSoftwareAdobe Fireworks CS6輲�tEXtCreation Time11/14/166z�� IDATx��}w�dU��{��\��'�0PMRXP�"
+�JPW@u
soo I try user randon .PNG google image, and it work.

After I need re export my file.

mrlords1 on 21 Feb 2017

@fdb I do not have spaces in my project path and still experience this issue.

joeferraro on 21 Feb 2017

@fdb that seems to be the case for me as well.

radelcom on 21 Feb 2017

The space in the path was the problem for me as well. I can't change that space, since it's controlled by Dropbox. Any other solution to this issue?

holgersindbaek on 27 Feb 2017

Hi guys,
I also want to create simple hello word based on this: https://facebook.github.io/react-native/docs/getting-started.html and I faced on this red error:

"node_modules/react-native/Libraries/CustomComponents/NavigationExperimental/assets/back-icon.png doesn't exist"

Can you help me to fix this?
I worked with React-Native later without any issue but after install new version this error appear on any app (also a simple hello world)

cyclops24 on 4 Mar 2017

👍3 👎1

This is my complete error:
photo_2017-03-04_20-51-18

cyclops24 on 4 Mar 2017

👎1

@cyclops24 restart the packager. It doesn't seem to pick up new images automatically.

joshfriend on 4 Mar 2017

@joshfriend how restart packager?
It's a simple hello world without any image:
I just run this command:

react-native init AwesomeProject
cd AwesomeProject
sudo react-native start
sudo react-native run-android

Exactly based on https://facebook.github.io/react-native/docs/getting-started.html

cyclops24 on 4 Mar 2017

👎1

Here's how you restart packager: https://github.com/drapanjanas/re-natal/issues/56

I still don't get it to work though, re-starting packager nor path name without spaces fix it.

Edit: restarted laptop, put folder outside of dropbox and seems to be working!

LoekL on 5 Mar 2017

👍2

I found a phenomenon that Every file renaming, adding, editing or deleting , I always should npm start and cmd rto receive file again.That's the way what I resolved this prob.

a1exlism on 13 Mar 2017

I've confirmed that this occurs when a path has parens, which is why people using Dropbox in this thread have this issue -- Dropbox (Personal) is part of the path. Spaces are working fine. cc @mkonicek @cpojer

brentvatne on 16 Mar 2017

👍2

The original topic of this issue is the "Unexpected character" bug.
It always occurs when an image file is added or changed.

jan-happy on 16 Mar 2017

👍6

Yeah， there is a special symbol + in the name of my project's parent folder .
I just removed it, everything goes ok.

woshi82 on 29 Mar 2017

👍3

@woshi82 I also have + in project parent name and after remove it everything goes OK.
Is it a bug or + is not acceptable for project folder name (maybe an undocumented limitation). I didn't find info or limitation about React-Native project name or path in docs.

cyclops24 on 10 Apr 2017

I had a * in my folder path and after I removed it my error was gone.

mitchjam on 23 Apr 2017

I have no special chaecters in my path and it happens to me any time I make a change to the image and re-save it.

agersoncgps on 30 Apr 2017

👍2

This work for me
just type "react-native link" in terminal
The reason is because you create new assets folder in your project and react-native may not know it

sorry for my bad English

silkyland on 1 May 2017

👍1

Not using dropbox, don't have a + in the code. When restarting the terminal and simulator it works fine, but like others have said, this is a workaround. Not a fix.

Working on IOS.

idrisdopico on 4 May 2017

as suggested by many here; restarted the entire process environment and now everything works. However, this is a BUG that NEEDS FIXING without any workarounds if this is going to make it to the real world. Going to SO with a question like this brings out the arrogant admins where they take GREAT pleasure telling you how to ask intelligent questions and what is an intelligent question is. To them, this IS NOT and intelligent question so no answer is given. I speak from frustrating experiences with SO, so I've learned to read, not speak.

The problem with this type of bug is that when you're deep in the dev cycle and you get this bug, some of us forget about the bug and end up wasting an enormous amount of time troubleshooting. when it happens more that once, it makes you feel like an idiot for NOT remembering what the solution/workaround is! BAD!

dcu-sharepoint on 8 May 2017

👍3

Check that if your project path has a special symbol, like '+'.

spenghang on 17 May 2017

Restart of packager works, but is a bit annoying :-)

jhalborg on 21 May 2017

Just got this on 0.44.2. my path has '-' not sure if it's the reason. Restarting the packager fixed.

deathemperor on 5 Jun 2017

I have a same problem, because my image's name has '-','+','_'. the solution is try react-native link or restart packager.

ridhoassuryadi on 15 Jun 2017

I have very easy fix for the problem that works perfectly for me. I remove the problematic image from the assets folder and add it again. And the red screen is gone. Just drag & drop. Restart is not needed.

zakster12 on 15 Jun 2017

👍2

Removing spaces and parenthesis from my path fixed that issue for me too.

SudoPlz on 17 Jun 2017

👍1

Hello there, I also get this issue!
"react-native run-android" work fine on Windows.
But I got " Unexpected character '?'" error on Mac OS when compile on IOS or Android Simulator.

I'm using Typescript with :
"devDependencies": {
"types/immutable": "^3.8.7",
"types/react": "^15.0.23",
"types/react-native": "^0.43.9",
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "19.0.2",
"react-test-renderer": "16.0.0-alpha.6",
"shadow-flux": "^1.0.13"
}

Let me know if you find something, cause this issue turn me crazy..
regards,

Phenek on 27 Jun 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.

mr-bat on 10 Jul 2017

Closing the server and restarting it works just fine.

ShubhamOjha on 27 Jul 2017

@sylvainbaronnet thanks it's working for me :+1:

Rebaiahmed on 31 Jul 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.

jan-happy on 1 Aug 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.

milon87 on 9 Aug 2017

same problem here, any process?

paranoidjk on 1 Sep 2017

Same problem, but nothing worked. Killed and restarted the packager, replaced the image... Same unexpected character red screen. Really frustrating.. Newbie dev here :)

gblaender on 1 Sep 2017

👍2

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.