React Native Packager / Babel throws an error (Unexpected character '�' (1:0) > 1 | �PNG)

[sogko]

Description

Steps

1. Run react native project react-native run-ios
2. Add a new image file to project folder
3. React Packager throws an error.

---

Solution / Workaround

Simply restart React Packager.

1. Close React Packager
2. Re-launch project react-native run-ios

---

Related issues

• Error on load image on React-native: Unexpected character facebook/react-native#6691

---

Error logs

SyntaxError: /Users/sogko/dev/git.luolix.top-sogko/acme/img/back@2x.png: Unexpected character '�' (1:0)
> 1 | �PNG
    | ^
  2 | 
  3 | 
  4 | IHDR2?��bKGD��������IDATh���A
    at Parser.pp.raise (/Users/sogko/dev/git.luolix.top-sogko/acme/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.getTokenFromCode (/Users/sogko/dev/git.luolix.top-sogko/acme/node_modules/babylon/lib/tokenizer/index.js:517:10)
    at Parser.readToken (/Users/sogko/dev/git.luolix.top-sogko/acme/node_modules/babylon/lib/tokenizer/index.js:154:19)
    at Parser.<anonymous> (/Users/sogko/dev/git.luolix.top-sogko/acme/node_modules/babylon/lib/plugins/jsx/index.js:49:20)
    at Parser.readToken (/Users/sogko/dev/git.luolix.top-sogko/acme/node_modules/babylon/lib/plugins/flow.js:168:22)
    at Parser.nextToken (/Users/sogko/dev/git.luolix.top-sogko/acme/node_modules/babylon/lib/tokenizer/index.js:144:19)
    at Parser.parse (/Users/sogko/dev/git.luolix.top-sogko/acme/node_modules/babylon/lib/parser/index.js:95:10)
    at parse (/Users/sogko/dev/git.luolix.top-sogko/acme/node_modules/babylon/lib/index.js:45:47)
    at File.parse (/Users/sogko/dev/git.luolix.top-sogko/acme/node_modules/babel-core/lib/transformation/file/index.js:500:34)
    at File.parseCode (/Users/sogko/dev/git.luolix.top-sogko/acme/node_modules/babel-core/lib/transformation/file/index.js:585:20)

[onpaws]

It's March. Any news on this bug?
As many RN developers will attest, it's really quite annoying. Happens almost every time I use RN.

[igorsantos07]

Quite a bummer for newcomers. I was just creating my first app and tried to add a logo to a Toolbar, and it crashed. No idea how to "take the image out of the build", and finally decided to google, and ended up here.
Such a basic thing (adding an image to the project) crashes the dev server? 🙄