How to make Electron "see" custom JS module?

Question

I am building a simple Electron JS app with main.js as an entry point, which loads login.html as a simple login form. In such file, i added a script to manage the submit event of the form via:

renderer.js

const {doLogin} = require("./login/login");

const form = document.getElementById('form')

form.onsubmit = (evt) => {
    evt.preventDefault()

    let [username, password] = Array.from(form.querySelectorAll('input')).map(item => item.value)
    doLogin(username, password).then()
}

As you can see, I've separated the doLogin() function into a file of its own, and imported it in my renderer.js.

login.js

const {authenticate} = require("ldap-authentication");

async function doLogin(username, password) {
    let authenticated = await authenticate({
        ldapOpts: ...,
        userDn: ...,
        username: username,
        userPassword: password,
    }).then((resp) => {
        console.log(resp)
    })
}

module.exports = {
    doLogin
}

My folder structure is as follows, scc-electron being the root folder:

│   main.js
│   package-lock.json
│   package.json
│   renderer.js
│
├───login
│       login.html
│       login.js

login.html imports both scripts like this:

Right now, when firing the app up I'm getting this error:

I've tried everything, from adding "type": "module" to package.json (it has "type": "commonjs" now) to switch back and forth between import and require, and messing around with file extensions (.mjs, .cjs and .js). And I cannot seem to make it work. And it's driving me crazy.

Which configuration is required in order for CommonJS modules to work in Electron?

Thanks in advance.

Edit: I've added some more require and login.html info as suggested by Alexander Leithner. I also have changed the export async function to a module.exports in login.js, since "export" was an unexpected token. The error is gone but now I'm facing:

Uncaught ReferenceError: require is not defined at renderer.js:1:19
Uncaught SyntaxError: Identifier 'doLogin' has already been declared at login.js:1:1

How to make Electron "see" custom JS module?

0 Answers