Electron new window

Question

I’m trying to open a new window with a specific route, but it seems like the route page is not loaded correctly. The new electron window is opened from FrmApprovalMain.js and the new window should be opened with FrmPOdet.js However, when it open, comes up with an error that seems to originate in the calling file (FrmApprovalMain.js) but that has nothing to do with the new window once this is opened… The mainWIndow is fine, but the new opened window throw an error (FrmPOdet.js has only one button on it).

This is the error I get in the new Window (mainWindow no error):

    Module../src/FrmApprovalMain.js
G:/Electron/poa/src/FrmApprovalMain.js:10
   7 | import NumberFormat from 'react-number-format';
   8 | import ModalMessage from './componentAPI/ModalMessage'
   9 | import SpinnerCentre from './componentAPI/SpinnerCentre'
> 10 | const electron = window.require('electron');
  11 | const ipcRenderer = electron.ipcRenderer;
  12 | 
  13 |

, and these are my statements in the app:

Statement to open a new window (FrmApprovalMain.js)

  const electron = window.require('electron');
    const ipcRenderer = electron.ipcRenderer;
[...]
     openPO(){
        console.log("Open new window")
        ipcRenderer.send('openNewPO', "S");
        console.log("New Window Opened")
      }

In electron I have created a new IPC listener where I create the new window:

ipcMain.on('openNewPO',(events,args) =>{
  const win = new BrowserWindow({
    parent: mainWindow,
    height: 600,
    width: 800, 
    show: true, 
  });
  win.removeMenu();
  win.loadURL("http://localhost:3000/podet");
});

The router is this

import App from './App'; 
import FrmPODet from './FrmPODet'

    const Router = () => (
        <HashRouter>
            <Switch>
                <Route exact path = "/podet" component = {FrmPODet} />
                <Route exact path = "/" component = {App} />

            </Switch>
        </HashRouter>
    );

FrmPODet has one single button

https://stackoverflow.com/questions/59681069/how-to-communicate-between-react-and-electron/59681218#59681218 — tpikachu, Mar 03 '20 at 03:07
https://stackoverflow.com/questions/60227586/ipcrenderer-not-receiving-message-from-main-process/60227981#60227981 — tpikachu, Mar 03 '20 at 03:08
I added node integration to the window and it doesn't come with an error anymore, but it still loading the main window, it doesn't load te route that I want. (I didn't add the nodeIntegration option initially because the route I want doesn't include any reference to elecron). So the problem is that my router is not loaded, instead of ../podet, it loads the main ../ — Eugen, Mar 03 '20 at 03:37

score 7 · Accepted Answer · answered Mar 03 '20 at 06:07

Finally solved, the problem was from the use of HashRouter vs BrowserRouter. HasRouter works fine for client side app (production), but in development is not working (server side approach when in development), so I had to use different statements for development and production.

My Router.js looks like this now:

const Router = () => {
    if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development'){
        return (
            <BrowserRouter>
                <Switch>
                    <Route exact path = "/" component = {App} />
                    <Route exact path = "/Podet" component = {FrmPODet} />
                </Switch>
            </BrowserRouter>)
    } else {
        return (
            <HashRouter>
                <Switch>
                    <Route exact path = "/" component = {App} />
                    <Route exact path = "/Podet" component = {FrmPODet} />
                </Switch>
            </HashRouter>)
    }
};

and my loadURL is:

  win.loadURL(
        isDev
        ? "http://localhost:3000/Podet"
        : `file://${path.join(__dirname, "../build/index.html#Podet")}`
    );

Electron new window

1 Answers1