TypeError: window.require is not a function in electron.js only in browser

Question

I've seen and did all steps in TypeError: window.require is not a function and Electron require() is not defined and many others.

I am using

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "concurrently": "^6.2.1",
    "electron": "^14.0.0",
    "electron-builder": "^22.11.7",
    "electron-is-dev": "^2.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "sqlite3": "^5.0.2",
    "wait-on": "^6.0.0",
    "web-vitals": "^1.0.1"
  },

I am following https://fmacedoo.medium.com/standalone-application-with-electron-react-and-sqlite-stack-9536a8b5a7b9 tutorial.

And when I type yarn electron-dev the small window appears and looks ok but I dunno how to debug - there is no console.

And when I access browser (opera or chrome) by localhost:3000 it gives me following

Currently it works in small app window (and doesn't work in browser) with such params:

mainWindow = new BrowserWindow({ width: 900, height: 680,     webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
    } });

If I remove the staff from index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

and change the code in index.html on something like

<!DOCTYPE html>
<html>
<head>
    <title>Hello World App</title>
</head>
<body>
<h1>Hello World</h1>
<button id="btn">Click</button>
</body>
<script>
    window.api.loadscript('./index.js');
</script>
</html>

the browser works ok

Well I want to put some UI into it, so I can't just delete entry point to react. Answers from those links above didn't help me and I want to debug my app, not only see "small app window"

Thank in advance

ps I dare to open console in that small window app by adding

 mainWindow.webContents.openDevTools();

but still I want to access it via browser

Freedruk · Answer 1 · 2021-09-09T17:17:48.103

window.require() is something that Electron injects/adds to your browser window. (if you have the nodeIntegration flag set to true).

When running the web app directly on localhost:3000 (outside the context of the Electron app) it will not have access to window.require() and then fail.

instead debug using electron-dev and set the resizable-flag, and increase the height and width on mainWindow: https://www.electronjs.org/docs/api/browser-window#winresizable

mainWindow = new BrowserWindow({ 
   width: 1200,
   height: 800,
   resizable: true,
   webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
    }
 });
 mainWindow.webContents.openDevTools();

If you still want to be able to run your app (but without Electron functionality) in a browser you can feature detect window.require():

if("require" in window){
   const electron = window.require("electron")
   Code that uses electron... this will then only be run in the context of your Electron app and not in the browser.
}

or

if(!!window.require){
   const electron = window.require("electron")
   Code that uses electron... this will then only be run in the context of your Electron app and not in your browser
}

Freedruk, thank you, but I still want to integrate that separate window straight into the browser. Is it possible? — deathfry, Sep 09 '21 at 08:44
Updated my answer with a potential work-around to get it running in a browser... I haven't tried this in my own apps, but in theory it should work :) — Freedruk, Sep 09 '21 at 17:19

TypeError: window.require is not a function in electron.js only in browser

1 Answers1