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?

electronjs.org/docs/tutorial/first-app does not use imports? — evolutionxbox
@evolutionxbox and if I want to use import instead of require? — Raphael10
I don’t think you can. stackoverflow.com/a/39400980/989920 — evolutionxbox
that project uses Babel which changes imports into requires before electron is built. They use a task runner called “gulp” to achieve this. — evolutionxbox
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

Supun Sandaruwan Supun Sandaruwan · Accepted Answer · 2021-05-15T15:50:59

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 Answers