Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

> SyntaxError: /Users/frantic/code/AwesomeProject/js/img/like@2x.png: 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)

Issue Analytics

State:
Created 7 years ago
Reactions:7
Comments:18 (11 by maintainers)

Top GitHub Comments

6reactions

rafecacommented, Aug 31, 2017

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

5reactions

sunnylqmcommented, May 25, 2017

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

Top Results From Across the Web

How to import image (.svg, .png ) in a React Component

try using import mainLogo from'./logoWhite.png'; //then in the render function of Jsx insert the mainLogo variable class NavBar extends ...

Asset Management - webpack

Let's try it out by adding a new style.css file to our project and import it in our index.js : project webpack-demo |-...

Using images - Canvas API - MDN Web Docs

External images can be used in any format supported by the browser, such as PNG, GIF, or JPEG. You can even use the...

Static Asset Handling - Vite

js import imgUrl from './img.png' document.getElementById('hero-img').src = imgUrl ... Common image, media, and font filetypes are detected as assets ...

Blog - Next.js 13

Next.js 13 introduces layouts, React Server Components, and streaming in the app directory, as well as Turbopack, an improved image ...