Uncaught ReferenceError: require is not defined at Object.url Electron-React-Typescrypt

Question

How to properly use import statement?

This is my very basic electron-react starter :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    Using node Chrome and Electron
  </body>
</html>

package.json :

{
  "name": "react-ggc",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "devDependencies": {
    "electron": "^10.1.2",
    "typescript": "^4.0.3"
  },
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "react": "^16.13.1"
  }
}

main.js :

const {app, BrowserWindow} = require('electron')
//import { app, BrowserWindow } from 'electron'

async function createWindow () {
  // Create the browser window
  win = new BrowserWindow({width: 800, height: 600})
  // and load the index.html of the app.
  win.loadURL ('http://localhost:3000/')
  win.webContents.openDevTools()
}

app.on('ready', createWindow)

Running yarn electron . I have no problems at all :

(base) marco@pc01:~/webMatters/electronMatters/react-ggc$ yarn electron .
yarn run v1.22.5
$ /home/marco/webMatters/electronMatters/react-ggc/node_modules/.bin/electron .

But when I add "type": "module" to package.json which, based on what I read around, should indicate that every .js files are considered modules, and modify in main.js the way of importing :

package.json :

{
  "type": "module",
  "name": "react-ggc",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "devDependencies": {
    "electron": "^10.1.2",
    "typescript": "^4.0.3"
  },
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "react": "^16.13.1"
  }
}

main.js :

//const {app, BrowserWindow} = require('electron')
import { app, BrowserWindow } from 'electron'

I get this error:

(base) marco@pc01:~/webMatters/electronMatters/react-ggc$ yarn electron .
yarn run v1.22.5
$ /home/marco/webMatters/electronMatters/react-ggc/node_modules/.bin/electron .
App threw an error during load
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/marco/webMatters
/electronMatters/react-ggc/main.js
require() of ES modules is not supported.
require() of /home/marco/webMatters/electronMatters/react-ggc/main.js from /home/marco
/webMatters/electronMatters/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js is an ES module file as it is a .js file whose nearest parent
package.json contains "type": "module" which defines all .js files in 
that package scope as ES modules.
Instead rename /home/marco/webMatters/electronMatters/react-
ggc/main.js to end in .cjs, change the requiring code to use import(),
or remove "type": "module" from /home/marco/webMatters/electronMatters
/react-ggc/package.json.

at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1162:13)
    at Module.load (internal/modules/cjs/loader.js:981:32)
    at Module._load (internal/modules/cjs/loader.js:881:14)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at loadApplicationPackage (/home/marco/webMatters/electronMatters
/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js:109:16)
    at Object.<anonymous> (/home/marco/webMatters/electronMatters
/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js:155:9)
    at Module._compile (internal/modules/cjs/loader.js:1145:30)
    at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1166:10)
    at Module.load (internal/modules/cjs/loader.js:981:32)
    at Module._load (internal/modules/cjs/loader.js:881:14)
A JavaScript error occurred in the main process
Uncaught Exception:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: 
/home/marco/webMatters/electronMatters/react-ggc/main.js
require() of ES modules is not supported.
require() of /home/marco/webMatters/electronMatters/react-ggc/main.js 
from /home/marco/webMatters/electronMatters/react-ggc/node_modules
/electron/dist/resources/default_app.asar/main.js is an ES module file 
as it is a .js file whose nearest parent package.json contains "type": 
"module" which defines all .js files in that package scope as ES 
modules.
    Instead rename /home/marco/webMatters/electronMatters/react-
ggc/main.js to end in .cjs, 
    change the requiring code to use import(), or remove "type": 
"module" from /home/marco
    /webMatters/electronMatters/react-ggc/package.json.

        at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1162:13)
        at Module.load (internal/modules/cjs/loader.js:981:32)
        at Module._load (internal/modules/cjs/loader.js:881:14)
        at Function.Module._load (electron/js2c/asar.js:769:28)
        at loadApplicationPackage (/home/marco/webMatters
/electronMatters/react-ggc/node_modules
    /electron/dist/resources/default_app.asar/main.js:109:16)
        at Object.<anonymous> (/home/marco/webMatters/electronMatters
/react-ggc/node_modules
    /electron/dist/resources/default_app.asar/main.js:155:9)
        at Module._compile (internal/modules/cjs/loader.js:1145:30)
        at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1166:10)
        at Module.load (internal/modules/cjs/loader.js:981:32)
        at Module._load (internal/modules/cjs/loader.js:881:14)

node version: v14.5.0

How to solve the problem?

https://www.electronjs.org/docs/tutorial/first-app does not use imports? — evolutionxbox, Sep 28 '20 at 15:14
@evolutionxbox and if I want to use import instead of require? — Raphael10, Sep 28 '20 at 15:16
I don’t think you can. https://stackoverflow.com/a/39400980/989920 — evolutionxbox, Sep 28 '20 at 15:17
Why this electron app or electron other apps can use import instead of require? https://github.com/getferdi/ferdi/blob/develop/src/app.js — Raphael10, Sep 28 '20 at 15:33
that project uses Babel which changes imports into requires before electron is built. They use a task runner called “gulp” to achieve this. — evolutionxbox, Sep 28 '20 at 15:39
there are many other similar tools, each with their own up/down-sides. ParcelJS, GruntJS, webpack, Makefile, etc. — evolutionxbox, Sep 28 '20 at 15:51
@evolutionxbox Thank you very much. I have to understand all the differences among them. So, now I have to read about them all — Raphael10, Sep 28 '20 at 15:56
@evolutionxbox which one can be considered more "user-friendly"? — Raphael10, Sep 28 '20 at 15:59
The simplest is npm scripts, but each’s friendliness is based on the user. Gulp is pretty good to start off with. It also has lots of plugins and has been around a while (I used it in 2013). — evolutionxbox, Sep 28 '20 at 16:01
@evolutionxbox Which packed is used by this electron app? https://github.com/emqx/MQTTX — Raphael10, Sep 28 '20 at 16:11
that project uses Vue which is a reactive view library which has its own built tools builtin. — evolutionxbox, Sep 28 '20 at 16:14
@Raphael10 I am also facing the same issue in angular and electron. If any of you can assist me in fixing this and to move forward. Thanks — Yisal Khan, Sep 30 '20 at 13:07

score 0 · Answer 1 · answered May 15 '21 at 15:50

for this you need to add webPreferences for creating window.

app.on('ready', () => {
    window = new BrowserWindow({
        width: 900,
        height: 680,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });
});

Uncaught ReferenceError: require is not defined at Object.url Electron-React-Typescrypt

1 Answers1