Electron-react-boilerplate: Not clear how to include images in my application

[kadamwhite]

This is probably an RTM moment for me with Electron in general, but it's not obvious how to set this up so that images can be included in the stylesheets (via background-image) or via img tags in the react markup: trying to link to an image throws a missing loader error because the url is parsed as a require. How could I go about getting images to show up in a project based on this boilerplate? Thanks,

[amilajack]

Do you mean stylesheet as in the css implementation of js?

[kadamwhite]

I'm not sure I understand the question. To take the nuance of loaders and webpack out of the picture, if I want a page in my site to include a graphic, where would I put image.jpg such that <img src="./where/am/i/image.jpg"/> will work as I might expect, I.e. The image is displayed on that page?

[amilajack]

I think what you're asking is 'How do I add the path to an image from Counter.css file?'. Is that it?

[kadamwhite]

@amilajack Apologies, I shouldn't have brought up the loaders at all because my question was not CSS-specific; I can figure out how to work around the loaders on my own. My question is, where I would put an image asset within the boilerplate so that it could be loaded through a regular image tag. I'm confused about how Electron actually locates static assets, should I want to load a resource as a normal img tag src as opposed to through part of the webpack bundle.

For a more concrete question, where would I put an image file and how would I formulate my src attribute such that adding an img tag to the Counter component would display that image?

Thank you for any assistance you might be able to offer!

[CestDiego]

I also want to include a file in the appPath directory but I cannot tell where that is or how should I add that (this is because I'm using https://github.com/maxogden/menubar and they take the apppath https://github.com/maxogden/menubar/blob/master/index.js#L14 this is why I'm not sure how to include everything in the dist folder in webpack

[kadamwhite]

Adding

app.use(express.static('assets'));

to server.js permits an assets/ directory at the root level (with an images/ subdir) to be served at localhost:3000 but then image links have to be src="http://localhost:3000/images/file.jpg", which feels brittle. Is this the only way to serve images within an electron application?

[amilajack]

EDIT: See https://github.com/chentsulin/electron-react-boilerplate/issues/250#issuecomment-262546926 for solution. This solution is outdated

@kadamwhite re: 'My question is, where I would put an image asset within the boilerplate so that it could be loaded through a regular image tag'

You should make a folder in /app called img. Use the image as an image source like so:

...
render() {
   <img src="./img/angular.jpg" />
}
...

This should work.

[kadamwhite]

@amilajack Thank you!

For anybody else who finds this thread, the solution for using images within CSS is also simple: Apply the file-loader or url-loader to the base webpack configuration, like this,

  loaders: [
    ...,
    {
      test: /\.(?:png|jpg|svg)$/,
      loader: 'url-loader',
      query: {
        // Inline images smaller than 10kb as data URIs
        limit: 10000
      }
    }

then simply use a relative path to the image in CSS url() statements

[btroo]

@amilajack I'm trying to your solution of adding a /app/img folder and including images like

...
<img src="./img/angular.jpg" />
...

and it works while running the dev server. However, when I try packaging, the images seem they aren't found. Do you know if something's changed that would cause this not to work since this thread was closed?

[amilajack]

I would recommend using this solution: https://github.com/chentsulin/electron-react-boilerplate/issues/250#issuecomment-227494838

const image = require('./static/someImage.jpg')
console.log(image); // '/build/12as7f9asfasgasg.jpg'

function imageComponent() {
  return (
    <img src={image} />
  )
}

// webpack.config.base.js
{
  loaders: [
    ...,
    {
      test: /\.(?:png|jpg|svg)$/,
      loader: 'url-loader',
      query: {
      // Inline images smaller than 10kb as data URIs        limit: 10000
    }
 ]
}

I'm thinking of adding support for this out of the box. Thank you for bringing this to my attention again.

[btroo]

Thanks for the help!

I'm trying this solution, and the files end up in the app/dist/ folder, but still don't appear/resolve when I run npm run package (works in the dev server again).

Any ideas?

[amilajack]

try this:

git clone https://github.com/chentsulin/electron-react-boilerplate.git image-test
cd image-test
git checkout webpack-image-support
npm cache clean
npm i
npm rb

Tell me what you see when you click on 'to counter'

[TimoSolo]

so do I need to do something like
import cow from './super-cow.jpg'; for every single image I want to use???

why does a relative path work on the dev server, but not in the package?

I've made a folder in app called "public" with all my images. I've added the following to webpack.config.base.js:

{
      test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/,
      loaders: ["file-loader?context=public&name=./public/[path][name].[ext]"],
      exclude: /node_modules/
    }

this code works in the dev server:
<img src='./public/image.png' />
but if I package the app I get an error:
file:///Users/ ... /electron-react-boilerplate.app/Contents/Resources/app.asar/public/image.png not found

[amilajack]

Importing images is the least hacky solution at the moment. It also allows you to do pretty cool things like compress images when packaging to production

[btroo]

Ah this works. Changing my const pic = require('PATH') to import pic from 'PATH' did the job.

I'm trying a similar approach with audio files, and again it's working in the dev server, but not when I package it:

// loader
{
  test: /\.wav$|\.mp3$/,
  loader: 'file-loader'
}

// in a component

import sound from 'AUDIO_PATH';
// ...
let aud = new Audio(sound);
aud.play();
// ...

I would think that the method for importing images would work for any file (i. e. audio) as long as the loader recognized them. Sorry if this is a little tangential to the thread, but what would be the best way to approach playing audio files?

[amilajack]

Thanks. I'll look into this

[amilajack]

Try doing this:

console.log(sound)

and let me know what the output is

[btroo]

On the dev server, it's http://localhost:3000/dist/9e99bf316e703854454cae4bc4faaec2.mp3

[amilajack]

Instead of console.log, try this:

alert(sound)

then package and tell me the output of that

[btroo]

../dist/9e99bf316e703854454cae4bc4faaec2.mp3

[johnryan]

@amilajack I tried using the webpack solution you mentioned, it works if i do:

<img src="./img/my_image.png" />

where "my_image.jpg" is stored in app/img. However if I do the same in css:

background-image: url(/img/my_image.png);

The image doesn't display (though it doesn't throw an error which i assume means it found the file when building). Is there something that looks blatantly wrong here? also, is the recommended way of doing it with an <img> tag rather than css? Thanks!

[johnryan]

@amilajack figured out the issue, the css is using a relative path to the file while the img tag is looking in the top level img folder.

if anyone else has this problem i had to do:

import my_image from './img/my_image.png'; //relative path to image
<img src={my_image} />

[erick2014]

@johnryan thx worked for me

[ZoeDreams]

If you use semantic-ui with react, import image won't work. Semantic-ui uses relative paths so you do not need to import every image or asset. This library simplifies by allowing you to reference with the path; such as:

<Image src='./assets/my_image.png' />

Make sure you have a . at the start of your image path. The documentation and examples all use /assets/myimage.png. The correct path needs to be ./assets/myimage.png to make it work when packaged. This assumes you are storing your images in a directory called assets that is located inside of your public directory. Not including the . will break the linking when you go to package and distribute your app.

[musyilmaz]

The response of @1-14x0r is not really working for me.
I am using semantic-ui-react as a package and importing the files as a constant, using img folder or specifying the path with a ./ is not working to package any assets with the application.

I will try to figure it out why this is happening soon.

[ZoeDreams]

@musyilmaz have you checked your build directory to see if the images are being copied over? In my project the ./public/assets/* gets copied into ./build/assets/* the ./ references the root of the build directory. Also whats it look like when you try to inspect the image with dev tools?

[musyilmaz]

currently, scripts of start and package not producing and /dist/ folder.. So I cannot see any of what is served contents

[ZoeDreams]

@musyilmaz in my electron.js file with my main entry point i have a global const for my asset dir.
const assetsDirectory = path.join(__dirname, "assets");

webpack will set the __dirname in reference to my dev or production mode. are your assets stored in your public directory? public dir is where your dev server hosts from.. its root.. The project will automagically compile changes to classfiles in your src.

[musyilmaz]

@1-14x0r can you provide an example based on this repositories webpack configurations.

Currently my images and assets are lying under the /app/assets/.... folders. And webpack is working in the (__dirname, "app"); path. I assume that they should be packaged with webpack.

[ZoeDreams]

@musyilmaz here is an example that i created off a fork of the master. Its pretty straight forward. webpack automagically picks up your new assets, and does a hot reload from js and css.

https://github.com/1-14x0r/electron-react-boilerplate/commit/497721e579bb5e445f18ed049b4ee894eec0ba89

[yingshaoxo]

if you are using the latest electron by following the official tutorial, you can just use this at the renderer.js file:

'background-image': './assets/yingshaoxo.jpg'

[Hazuki124]

Another workaround:

You should make a folder in /app called img (or any other name). Add it under "build" "files" section in root package.json. Now the builder will include this folder in app.asar and you can use images in css files by link (dev and prod as well):

'background-image': './img/image.jpg'

app/img

// root package.json 
  "build": {
    "productName": "...",
    "appId": "org.develar.ElectronReact",
    "files": [
      "dist/",
       ...
      "img/" // your folder
    ],

[kingpalethe]

Very easy to get assets working in development, but very very hard in the build, so far. Could really use a clear example on how to include and use these kinds of assets:

1) Images
2) Executables (.exe)

So far I've put our assets in a folder called static the root development folder, and am able to access them easily in development like this:
path.join(path.dirname(__dirname), 'static', fileName); ... this works beautifully for both images and executables, but only in development......

In production, I've tried lots of things with the build configuration, so far:

 "files": [
      "dist/",
      "node_modules/",
      "app.html",
      "main.prod.js",
      "main.prod.js.map",
      "package.json"
    ],
    "extraFiles": [
      {
        "from": "static",
        "to": "static",
        "filter": [
          "**/*"
        ]
      }
    ],

And I have tried toggling this:

    "asar": false,
    "asar": true,

But still none of these assets can be found after the build.

It would be great to have a canonical suggestion from @amilajack about how to included executables and images so they are accessible from both production and development.

[amilajack]

Sure, @jooohhn and I will take a look at this!

[Hazuki124]

@kingpalethe There is very simple way to use assets in the app. You should put assets folder in app not the root folder. And then include this folder under "build"."files" in root package.json. See an example here: https://github.com/Hazuki124/rus-shenmue-launcher I have assets folder and paths to these files are the same for development and for production build.

[kingpalethe]

@Hazuki124 thanks for that suggestion, yes, that was my original approach and when I first tested it, about 6 months ago, this worked will after I built the installer with yarn package, but now I am having problems, not sure why.. maybe because I updated to the newest dependencies of electron-react-boilerplate?

To test it again I did as you suggested:

  "files": [
      "dist/",
      "node_modules/",
      "app.html",
      "main.prod.js",
      "main.prod.js.map",
      "package.json",
      "static/"
    ],

And I put the static folder at app/static in my project.

Now running yarn package again, I find that the images in static do now appear in my built application, however, the built application seems to be searching for this path \AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\renderer.prod.js

and I get this error message

init.ts:207 Unable to load preload script: C:\Users\USERNAME\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\renderer.prod.js
(anonymous) @ init.ts:206
init.ts:209 TypeError: Cannot read property 'style' of null
    at C:\Users\USERNAME\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\node_modules\fabric\dist\fabric.js:2575
    at C:\Users\USERNAME\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\node_modules\fabric\dist\fabric.js:2626
    at Object.<anonymous> (C:\Users\USERNAME\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\node_modules\fabric\dist\fabric.js:2694)
    at Object.<anonymous> (C:\Users\USERNAME\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\node_modules\fabric\dist\fabric.js:29676)
    at Module._compile (internal/modules/cjs/loader.js:967)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1004)
    at Module.load (internal/modules/cjs/loader.js:815)
    at Module._load (internal/modules/cjs/loader.js:727)
    at Function.Module._load (electron/js2c/asar.js:738)
    at Module.require (internal/modules/cjs/loader.js:852)

Strangely my dist/renderer.prod.js cannot be found, and also it is showing an error about a native module that I have in app/package.json

[kingpalethe]

here is my app/package.json

{
  "name": "Example-voice",
  "productName": "Example-voice",
  "version": "0.1.1",
  "description": "Create videos with synthesized speech.",
  "main": "./main.prod.js",
  "author": {
    "name": "Example Inc.",
    "email": "[email protected]",
    "url": "https://github.com/electron-react-boilerplate"
  },
  "scripts": {
    "electron-rebuild": "node -r ../internals/scripts/BabelRegister.js ../internals/scripts/ElectronRebuild.js",
    "postinstall": "yarn electron-rebuild"
  },
  "license": "MIT",
  "dependencies": {
    "fabric": "https://github.com/fabricjs/fabric.js.git#master"
  },
  "devDependencies": {}
}

and here is my package.json

{
  "name": "Example-voice",
  "productName": "Example Voice",
  "version": "0.1.1",
  "description": "A thing.",
  "scripts": {
    "build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",
    "build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors",
    "build-e2e": "cross-env E2E_BUILD=true yarn build",
    "build-main": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
    "build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
    "dev": "cross-env START_HOT=1 node -r @babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev",
    "electron-rebuild": "electron-rebuild --parallel --force --types prod,dev,optional --module-dir app",
    "ts": "tsc",
    "lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
    "lint-fix": "yarn --silent lint --fix; exit 0",
    "lint-styles": "stylelint --ignore-path .eslintignore '**/*.*(css|scss)' --syntax scss",
    "lint-styles-fix": "yarn --silent lint-styles --fix; exit 0",
    "package": "yarn build && electron-builder build --publish never",
    "package-all": "yarn build && electron-builder build -mwl",
    "package-ci": "yarn postinstall && yarn build && electron-builder --publish always",
    "package-linux": "yarn build && electron-builder build --linux",
    "package-win": "yarn build && electron-builder build --win --x64",
    "postinstall": "node -r @babel/register internals/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn build-dll && opencollective-postinstall",
    "postlint-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{js,jsx,json,html,css,less,scss,yml}'",
    "postlint-styles-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{css,scss}'",
    "preinstall": "node ./internals/scripts/CheckYarn.js",
    "prestart": "yarn build",
    "start": "cross-env NODE_ENV=production electron ./app/main.prod.js",
    "start-main-dev": "cross-env START_HOT=1 NODE_ENV=development electron -r ./internals/scripts/BabelRegister ./app/main.dev.ts",
    "start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
    "test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 jest",
    "test-all": "yarn lint && yarn ts && yarn build && yarn test && yarn build-e2e && yarn test-e2e",
    "test-e2e": "node -r @babel/register ./internals/scripts/CheckBuildsExist.js && cross-env NODE_ENV=test testcafe electron:./app ./test/e2e/HomePage.e2e.ts",
    "test-e2e-live": "node -r @babel/register ./internals/scripts/CheckBuildsExist.js && cross-env NODE_ENV=test testcafe --live electron:./app ./test/e2e/HomePage.e2e.ts",
    "test-watch": "yarn test --watch"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "cross-env NODE_ENV=development eslint --cache"
    ],
    "{*.json,.{babelrc,eslintrc,prettierrc,stylelintrc}}": [
      "prettier --ignore-path .eslintignore --parser json --write"
    ],
    "*.{css,scss}": [
      "stylelint --ignore-path .eslintignore --syntax scss --fix",
      "prettier --ignore-path .eslintignore --single-quote --write"
    ],
    "*.{html,md,yml}": [
      "prettier --ignore-path .eslintignore --single-quote --write"
    ]
  },
  "build": {
    "productName": "Example Voice",
    "copyright": "Copyright 2020 Example Inc.",
    "appId": "com.example.voice",
    "files": [
      "dist/",
      "node_modules/",
      "app.html",
      "main.prod.js",
      "main.prod.js.map",
      "package.json",
      "static/"
    ],
    "dmg": {
      "contents": [
        {
          "x": 130,
          "y": 220
        },
        {
          "x": 410,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    "win": {
      "target": [
        "nsis",
        "msi"
      ]
    },
    "linux": {
      "target": [
        "deb",
        "rpm",
        "AppImage"
      ],
      "category": "Development"
    },
    "directories": {
      "buildResources": "resources",
      "output": "release"
    },
    "publish": {
      "provider": "github",
      "owner": "electron-react-boilerplate",
      "repo": "electron-react-boilerplate",
      "private": false
    }
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git"
  },
  "author": {
    "name": "Example Inc.",
    "email": "[email protected]",
    "url": "https://Example.com"
  },
  "contributors": [],
  "license": "Commercial",
  "jest": {
    "testURL": "http://localhost/",
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx",
      "ts",
      "tsx",
      "json"
    ],
    "moduleDirectories": [
      "node_modules",
      "app/node_modules"
    ],
    "setupFiles": [
      "./internals/scripts/CheckBuildsExist.js"
    ]
  },
  "devDependencies": {
    "@amilajack/testcafe-browser-provider-electron": "^0.0.15-alpha.1",
    "@babel/core": "^7.10.4",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-proposal-decorators": "^7.10.4",
    "@babel/plugin-proposal-do-expressions": "^7.10.4",
    "@babel/plugin-proposal-export-default-from": "^7.10.4",
    "@babel/plugin-proposal-export-namespace-from": "^7.10.4",
    "@babel/plugin-proposal-function-bind": "^7.10.4",
    "@babel/plugin-proposal-function-sent": "^7.10.4",
    "@babel/plugin-proposal-json-strings": "^7.10.4",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.10.4",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
    "@babel/plugin-proposal-numeric-separator": "^7.10.4",
    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
    "@babel/plugin-proposal-pipeline-operator": "^7.10.4",
    "@babel/plugin-proposal-throw-expressions": "^7.10.4",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@babel/plugin-transform-react-constant-elements": "^7.10.4",
    "@babel/plugin-transform-react-inline-elements": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@babel/preset-typescript": "^7.10.4",
    "@babel/register": "^7.10.4",
    "@types/enzyme": "^3.10.5",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/history": "^4.7.6",
    "@types/jest": "^26.0.3",
    "@types/node": "12",
    "@types/react": "^16.9.38",
    "@types/react-dom": "^16.9.8",
    "@types/react-redux": "^7.1.9",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.5",
    "@types/react-test-renderer": "^16.9.2",
    "@types/redux-logger": "^3.0.8",
    "@types/webpack": "^4.41.17",
    "@types/webpack-env": "^1.15.2",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-dev-expression": "^0.2.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "browserslist-config-erb": "^0.0.1",
    "chalk": "^4.1.0",
    "concurrently": "^5.2.0",
    "core-js": "^3.6.5",
    "cross-env": "^7.0.0",
    "css-loader": "^3.6.0",
    "detect-port": "^1.3.0",
    "electron": "9.0.4",
    "electron-builder": "^22.7.0",
    "electron-devtools-installer": "^3.0.0",
    "electron-rebuild": "^1.11.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.5.0",
    "file-loader": "^6.0.0",
    "husky": "^4.2.5",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.1.0",
    "lint-staged": "^10.2.11",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "opencollective-postinstall": "^2.0.3",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "prettier": "^2.0.5",
    "react-test-renderer": "^16.12.0",
    "redux-logger": "^3.0.6",
    "rimraf": "^3.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "stylelint": "^13.6.1",
    "stylelint-config-prettier": "^8.0.1",
    "stylelint-config-standard": "^20.0.0",
    "terser-webpack-plugin": "^3.0.6",
    "testcafe": "^1.8.6",
    "testcafe-browser-provider-electron": "^0.0.15-alpha.1",
    "testcafe-react-selectors": "^4.0.0",
    "typed-css-modules-webpack-plugin": "^0.2.0",
    "typescript": "^3.9.5",
    "typings-for-css-modules-loader": "^1.7.0",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-bundle-analyzer": "^3.8.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.0",
    "@fortawesome/fontawesome-pro": "^5.12.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@fortawesome/pro-duotone-svg-icons": "^5.13.0",
    "@fortawesome/pro-light-svg-icons": "^5.13.0",
    "@fortawesome/pro-regular-svg-icons": "^5.13.0",
    "@fortawesome/pro-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@hot-loader/react-dom": "^16.11.0",
    "@rails/actioncable": "^6.0.2-1",
    "@umijs/hooks": "^1.9.3",
    "array-move": "^2.2.1",
    "aws-sdk": "^2.661.0",
    "axios": "https://github.com/ArnaudValensi/axios.git#37c7730a2917b1d8e0a6396d1295a8c20a1d3c1a",
    "bulma": "^0.9.0",
    "bulmaswatch": "^0.8.1",
    "chance": "^1.1.4",
    "check-disk-space": "^2.1.0",
    "classnames": "^2.2.6",
    "date-fns": "^2.11.0",
    "devtron": "^1.4.0",
    "electron-debug": "^3.0.1",
    "electron-dl": "^3.0.1",
    "electron-localshortcut": "^3.2.1",
    "electron-log": "^4.2.2",
    "electron-updater": "^4.3.1",
    "emotion": "^10.0.27",
    "escape-html": "^1.0.3",
    "execa": "^4.0.0",
    "find-closest": "^6.0.1",
    "fs-extra": "^9.0.0",
    "get-window": "^1.1.2",
    "get-youtube-id": "^1.0.1",
    "he": "^1.2.0",
    "hex-rgb": "^4.1.0",
    "history": "^4.10.1",
    "is-hotkey": "^0.1.6",
    "js-levenshtein": "^1.1.6",
    "localforage": "^1.7.3",
    "lodash": "^4.17.15",
    "markdown-it": "^11.0.0",
    "markdown-it-link-target": "^1.0.2",
    "mobx": "^5.15.4",
    "mobx-keystone": "^0.43.1",
    "mobx-react-lite": "^2.0.7",
    "mousetrap": "^1.6.5",
    "nanoid": "^3.1.10",
    "object-sizeof": "^1.6.1",
    "pretty-bytes": "^5.3.0",
    "pretty-ms": "^7.0.0",
    "random-item": "^3.0.0",
    "react": "^16.13.1",
    "react-color": "^2.18.1",
    "react-colorscales": "^0.7.3",
    "react-cropper": "^1.3.0",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^16.12.0",
    "react-draggable": "^4.3.1",
    "react-dropzone": "^10.2.2",
    "react-hot-loader": "^4.12.21",
    "react-hotkeys-hook": "^2.1.3",
    "react-image-crop": "^8.6.2",
    "react-json-prettify": "^0.2.0",
    "react-json-view": "^1.19.1",
    "react-markdown": "^4.3.1",
    "react-markdown-editor-lite": "^1.1.4",
    "react-toastify": "^5.5.0",
    "react-twitter-embed": "^3.0.3",
    "react-useinterval": "^1.0.1",
    "remotedev": "^0.2.9",
    "rsuite": "^4.6.0",
    "sanitize-filename": "^1.6.3",
    "selection-is-backward": "^1.0.0",
    "slate": "^0.58.3",
    "slate-history": "^0.58.3",
    "slate-react": "^0.58.3",
    "slugify": "^1.4.0",
    "source-map-support": "^0.5.19",
    "tldts": "^5.6.23",
    "uifx": "^2.0.7",
    "unix-timestamp": "^0.2.0",
    "uuid": "^7.0.1",
    "valid-url": "^1.0.9",
    "videocontext": "^0.54.0",
    "voca": "^1.4.0"
  },
  "devEngines": {
    "node": ">=7.x",
    "npm": ">=4.x",
    "yarn": ">=0.21.3"
  },
  "collective": {
    "url": "https://opencollective.com/electron-react-boilerplate-594"
  },
  "browserslist": [
    "extends browserslist-config-erb"
  ]
}

[kingpalethe]

this issue is also reported here: https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2441

[kingpalethe]

this fixed this issue for me! https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2503/commits/1d97ac110321288b0068c55ca458e3563b751551