title: How to load external file in child window of electron main window in electronjs
body: <p>I have created an application with electron and next.from main window, creating child window. I want to load file to child window but it is throwing file not found error.</p>
  
  <p>loading file is in: renderer/components/overlay/overlay.html</p>
  
  <pre><code>import {app,BrowserWindow,remote,globalShortcut} from 'electron';
  import OverlayWindow from '../components/overlay/overlay';
  
  const path = require('path');
  const url = require('url');
  const os=require('os');
  
  export const createOverlayWindow=()=&gt;{
      const overlayWindow = new remote.BrowserWindow({
          width:300,
          height:100,
          frame:false,
          webPreferences: {
              transparent: true,
              nodeIntegration: true
          }
      });
      // overlayWindow.setAlwaysOnTop(true);
      // overlayWindow.loadURL(`file://${__dirname}/renderer/components/overlay/overlay.html`)    
      console.log(path.join(__dirname, '..', 'overlay.js'));
      const urlFormat=url.format({
           pathname:  path.join(__dirname,"renderer/components/overlay/overlay.html" ),
           protocol: "file:",
          slashes: true
      })
      console.log(urlFormat);
      overlayWindow.loadURL(urlFormat);
      const shortcut = remote.globalShortcut.register('Alt+Space', () =&gt; {
          console.log('shortcut registered');
          overlayWindow.show();
        });
      overlayWindow.webContents.setFrameRate(30)
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6uvIN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6uvIN.png" alt="enter image description here"></a></p>