React-native: HMR: When adding image it tries to parse PNG as JS

[frantic]

Repro: Enable HMR, add an image to working tree.

> SyntaxError: /Users/frantic/code/AwesomeProject/js/img/[email protected]: Unexpected character '�' (1:0)
> > 1 | �PNG
>     | ^
>   2 |
>   3 |
>   4 | IHDRP���sRGB��� pHYs

                            ���iTXtXML:com.adobe.xmp<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 5.4.0">
>     at Parser.pp.raise (/Users/frantic/code/AwesomeProject/node_modules/babylon/index.js:1378:13)
>     at Parser.getTokenFromCode (/Users/frantic/code/AwesomeProject/node_modules/babylon/index.js:5250:10)
>     at Parser.readToken (/Users/frantic/code/AwesomeProject/node_modules/babylon/index.js:4887:19)
>     at Parser.<anonymous> (/Users/frantic/code/AwesomeProject/node_modules/babylon/index.js:4338:20)
>     at Parser.readToken (/Users/frantic/code/AwesomeProject/node_modules/babylon/index.js:3632:22)
>     at Parser.nextToken (/Users/frantic/code/AwesomeProject/node_modules/babylon/index.js:4877:19)
>     at Parser.parse (/Users/frantic/code/AwesomeProject/node_modules/babylon/index.js:1348:10)
>     at Object.parse (/Users/frantic/code/AwesomeProject/node_modules/babylon/index.js:45:50)
>     at File.parse (/Users/frantic/code/AwesomeProject/node_modules/babel-core/lib/transformation/file/index.js:479:24)
>     at File.parseCode (/Users/frantic/code/AwesomeProject/node_modules/babel-core/lib/transformation/file/index.js:568:20)

[bosung90]

Whenever you add/rename image files to the working tree, you need to restart the react packager. I get that error even when I don't use HMR

[satya164]

cc @martinbigio

[grabbou]

Same here. @bosung90 suggestion is correct - restarting the packager solves the issue.

[jan-happy]

This is kind of annoying if you work with lots of image assets that need changing during development.

[satya164]

This is indeed annoying. I face this a lot too. @bestander who is in charge of HMR now-a-days?

[bestander]

@satya164, currently @matryoshcow and @davidaurelio are in charge of the packager.
@matryoshcow, do you think there is a quick fix for this?

[matryoshcow]

I am working on a set of changes that will likely also fix this issue. These are scheduled to be shipped some time next week.

[jan-happy]

@bestander: Any news on this? A fix would be very very great. Thanks a lot!

[matryoshcow]

The packager update that also fixes this issue has been delayed a bit. In the meantime, a PR to directly address this issue would be welcome :)

[alex-paterson]

For others hitting an "Unexpected character" error importing images: with RN 0.35.0, brackets and spaces in image names were doing this to me.

[cpojer]

We should definitely find a solution for this. My guess is this is a minor bug somewhere in RNP and we just need somebody to write a test and a fix for this. Not sure if we'll get to it anytime soon so if you have experience with the HMR code, please help us out :)

[hramos]

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.

[sunnylqm]

This is not fixed yet and should remain open. @hramos

[hramos]

Is anybody actively working on a PR? Otherwise, this might end up getting closed again in 60 days.

[levibuzolic]

@matryoshcow any suggestions on where/how to fix this? I've been looking into it a little today but not having much luck with it.

[bestander]

@rafeca was looking at this feature recently?

[rafeca]

This was fixed last week :) https://github.com/facebook/metro-bundler/commit/679309987b3572860e2f8fa7e08f9a315718d0ca

[hramos]

Note that we need to publish a new metro-bundler release and update React Native to use it before the fix will be reflected in your projects.