electron-react-boilerplate: Import image in main.development.js result in error

For some reasons, adding

how to reproduce

Add this line to app/main.development.js

import icon from '../resources/icon.png';

Then start dev server npm run dev

What happens

Uncaught Exception:
SyntaxError: D:/Users/raymo/workspace/electron-react-boilerplate/resources/icon.png: Unexpected character '�' (1:0)
> 1 | �PNG
    | ^
  2 | 
  3 |

Some infos

Windows 10 npm : 3.10.10 (i don’t think this is related to node or npm version) node: 6.9.4 (i don’t think this is related to node or npm version) electron-react-boilerplate: last version from master branch.

Adding import icon from '../resources/icon.png'; to a component or wherever in the app does work as expected.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 20 (11 by maintainers)

Most upvoted comments

Ok, after testing all possible config i found one which does work:

/package.json Add "includes/" to "files: [].

/app/includes (notice the app, include folder MUST not be at the top level) Add icon.png

/app/main.development.js

new Tray(`${__dirname}\\includes\\icon.png`);

I didn’t realised that in top level package.json we actually reference files in the app folder, i thought we were referencing from top level.

Thanks @Slapbox.

Even if it that works, i'm still interested in being able to `import` images, it does not solve that problem.

anthonyraymond on Aug 14, 2017