Using create-react-app with electron-builder

Question

I have create a simple app using create-react-app and made the following changes to package.json

{
  "main": "public/electron.js",
  "homepage": "./",
  "scripts": {
    "start": "node scripts/start.js",
    "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
    "preelectron-pack": "yarn build",
    "electron-pack": "electron-builder build -m",
    "build": "node scripts/build.js",
    "prettify": "prettier --write \"src/**/*.js\"",
    "precommit": "yarn prettify",
    "test": "node scripts/test.js --env=jsdom"
  }
}

The electron.js file in the public folder

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')
const isDev = require('electron-is-dev')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1364,
    height: 768,
    webPreferences: {
      webSecurity: false
    }
  })
  mainWindow.setMinimumSize(1364, 768)
  mainWindow.loadURL(
    isDev
      ? 'http://localhost:3000'
      : url.format({
          pathname: path.join(__dirname, '../build/index.html'),
          protocol: 'file:',
          slashes: true
        })
  )
  mainWindow.webContents.openDevTools()
  mainWindow.on('closed', () => (mainWindow = null))
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

On running the script electron-pack it gives me this error: not allowed to load local resource file:///index.html

What could be the possible issue?

react-scripts version: 1.1.5
electron-builder version: 20.28.2

Answer 1

I solved it.

The issue was with BrowserRouter of react-router. I had to change it to HashRouter and now all files and routes load properly.