Error when require a PNG image

[thangngoc89]

This only happens on build step, it doesn't happen on dev mode. I guests it's node/webpack environment

Stack trace:

Template execution failed: SyntaxError: /home/khoa/web/tooth/frontend/components/search/trans.png: Unexpected character '�' (1:0)
  SyntaxError: /home/khoa/web/tooth/frontend/components/search/trans.png: Unexpected character   '�' (1:0)
  > 1 | �PNG
      | ^
    2 | ?
    3 | [22m
    4 | IHDR  m[41  1mQ�^a[22m  2mtEXtSoftwareAdobe ImageReadyq�e  m<  qiTXtXML:com.adobe.xmp  <?xpacket begin=" " id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk  3m="Adobe XMP Core 5.5-c014 79.151481, 2013/03/13-12:09:15        ">  m <rdf:RDF xmlns:rdf="http:  //www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:[33mDescription rdf:about="" xmlns:xmpMM=[39m"http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http:/  /ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:xmp="http://ns  .adobe.com/xap/1.0/" xmpMM:OriginalDocumentID="xmp.d  id:d3a7c906-7b1b-1749-be6c-7b7c0df0881c" xmpMM:DocumentID=  m"xmp.did:FC0A9B24DE7111E4A312C636C492E7C2" xmpMM:InstanceID="xmp.iid:FC0A9B23DE7111E4A312C636C492E7C2" xmp:CreatorTool  ="Adobe Photoshop CC (Windows)"> <xmpMM  9m:DerivedFrom stRef:instanceID="xmp.iid:f76eb8  cd-94ec-114f-a62f-7f548c5ac408" stRef:documentID="xmp.did:d3a7  c906-7b1b-1749-be6c-7b7c0df0881c"/> </rdf[39m:Description> </rdf:  9mRDF> </x:xmpmeta> <?xpacket end="r"?>t`��ID  ATxڼ��
  
  - index.js:4452 Parser.pp$5.raise
    [frontend]/[babylon]/lib/index.js:4452:13
  
  - index.js:1147 Parser.getTokenFromCode
    [frontend]/[babylon]/lib/index.js:1147:10
  
  - index.js:776 Parser.readToken
    [frontend]/[babylon]/lib/index.js:776:19
  
  - index.js:7148 Parser.readToken
    [frontend]/[babylon]/lib/index.js:7148:20
  
  - index.js:766 Parser.nextToken
    [frontend]/[babylon]/lib/index.js:766:19
  
  - index.js:1672 Parser.parse
    [frontend]/[babylon]/lib/index.js:1672:10
  
  - index.js:7180 parse
    [frontend]/[babylon]/lib/index.js:7180:37
  
  - index.js:517 File.parse
    [frontend]/[babel-core]/lib/transformation/file/index.js:517:15
  
  - index.js:602 File.parseCode
    [frontend]/[babel-core]/lib/transformation/file/index.js:602:20
  
  - pipeline.js:49 
    [frontend]/[babel-core]/lib/transformation/pipeline.js:49:12
  
  - index.js:564 File.wrap
    [frontend]/[babel-core]/lib/transformation/file/index.js:564:16
  
  - pipeline.js:47 Pipeline.transform
    [frontend]/[babel-core]/lib/transformation/pipeline.js:47:17
  
  - node.js:152 Object.transformFileSync
    [frontend]/[babel-core]/lib/api/node.js:152:10
  
  - node.js:118 compile
    [frontend]/[babel-register]/lib/node.js:118:20
  
  - node.js:144 loader
    [frontend]/[babel-register]/lib/node.js:144:14
  
  - node.js:154 Object.require.extensions.(anonymous function) [as .js]
    [frontend]/[babel-register]/lib/node.js:154:7
  
  - module.js:20 require
    internal/module.js:20:19
  
  - index.js:4 Object.<anonymous>
    /home/khoa/web/tooth/frontend/components/search/index.js:4:1

[developit]

preact build --no-prerender will fix this in the interim. We need to shim in a binary data loader for the prerenderer, should be pretty simple to do.

[rkostrzewski]

IMHO the best idea would be to use webpack to create a bundle exporting (library target?) root component which would be processed by preact's string renderer.

This way all glorious webpack loaders are preserved (e.g. url loaders, image size optimization etc).

[thangngoc89]

@rkostrzewski this is how we are doing it in Phenomic . To be fair, this is a very complicated thing to do and there are many important bugs than this. So I suggest that in the mean time, just tell user to avoid webpack specific loader (just like Next.js did)

[developit]

I've been thinking we might have to do the webpack-on-the-server route. It's not the worst thing, the current loader injection stuff I had to add to get basic apps working under Node directly is pretty gross.

I've seen people use UMD for both their web bundle and their Node import for SSR - think that'd work? Not sure if it would bloat the bundle size at all.

[SaraVieira]

@rkostrzewski this can be closed right ?

[reznord]

I don't think this is fixed.

[thangngoc89]

This is fixed by switching to prerender using Webpack.