Is there a way I can define document?

Question

Error:

App threw an error during load
ReferenceError: document is not defined
    at Object.<anonymous> (C:\Users\me\Desktop\Password Generator\main.js:45:19)
    at Module._compile (internal/modules/cjs/loader.js:967:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1004:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at loadApplicationPackage (C:\Users\me\Desktop\Password Generator\node_modules\electron\dist\resources\default_app.asar\
main.js:109:16)
    at Object.<anonymous> (C:\Users\me\Desktop\Password Generator\node_modules\electron\dist\resources\default_app.asar\main
.js:155:9)
    at Module._compile (internal/modules/cjs/loader.js:967:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1004:10)

Javascript main.js:

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

function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  // Open the DevTools.
  win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

const resultEl = document.getElementById('result');
const lengthEl = document.getElementById('length');
const uppercaseEl = document.getElementById('uppercase');
const lowercaseEl = document.getElementById('lowercase');
const numbersEl = document.getElementById('numbers');
const symbolsEl = document.getElementById('symbols');
const generateEl = document.getElementById('generate');
const clipboard = document.getElementById('clipboard');

const randomFunc = {
    lower: getRandomLower,
    upper: getRandomUpper,
    number: getRandomNumber,
    symbol: getRandomSymbol
}

clipboard.addEventListener('click', () => {
    const textarea = document.createElement('textarea');
    const password = resultEl.innerText;

    if(!password) { return; }

    textarea.value = password;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    textarea.remove();
    alert('Password copied to clipboard');
});

generate.addEventListener('click', () => {
    const length = +lengthEl.value;
    const hasLower = lowercaseEl.checked;
    const hasUpper = uppercaseEl.checked;
    const hasNumber = numbersEl.checked;
    const hasSymbol = symbolsEl.checked;

    resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length);
});

function generatePassword(lower, upper, number, symbol, length) {
    let generatedPassword = '';
    const typesCount = lower + upper + number + symbol;
    const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0]);

    // Doesn't have a selected type
    if(typesCount === 0) {
        return '';
    }

    // create a loop
    for(let i=0; i<length; i+=typesCount) {
        typesArr.forEach(type => {
            const funcName = Object.keys(type)[0];
            generatedPassword += randomFunc[funcName]();
        });
    }

    const finalPassword = generatedPassword.slice(0, length);

    return finalPassword;
}

function getRandomLower() {
    return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}

function getRandomUpper() {
    return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
    return +String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}

function getRandomSymbol() {
    const symbols = '!@#$%^&*(){}[]=<>/,.'
    return symbols[Math.floor(Math.random() * symbols.length)];
}

HTML index.html:

<!DOCTYPE html>
<html>
<div class="container">
    <h2>Password Generator</h2>
    <link rel="stylesheet" href="./main.css" />
    <div class="result-container">
        <span id="result"></span>
        <button class="btn" id="clipboard">
            <i class="far fa-clipboard"></i>
        </button>
    </div>
    <div class="settings">
        <div class="setting">
            <label>Password length</label>
            <input type="number" id="length" min='4' max='20' value='20' />
        </div>
        <div class="setting">
            <label>Include uppercase letters</label>
            <input type="checkbox" id="uppercase" checked />
        </div>
        <div class="setting">
            <label>Include lowercase letters</label>
            <input type="checkbox" id="lowercase" checked />
        </div>
        <div class="setting">
            <label>Include numbers</label>
            <input type="checkbox" id="numbers" checked />
        </div>
        <div class="setting">
            <label>Include symbols</label>
            <input type="checkbox" id="symbols" checked />
        </div>
    </div>
    <button class="btn btn-large" id="generate">
        Generate password
    </button>
</div>
    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
        <script src="./main.js"></script>
  </body>
</html>

Information: I'm currently using the electron framework by Github. I had no trouble running the quickstart, but running what I currently have doesn't seem to be working. I have my package.json file setup and installed electron. I was just wondering what I can do to fix this and what could be causing this. I've been doing some research and I'm getting different answers about document not needing to be defined, something is wrong with my browser, or I'm missing things. Any help is appreciated thank you.

EDIT: This got duplicated. I've already attempted to add the ipc and renderer but I'm getting the same error.

score 1 · Answer 1 · answered Jul 12 '20 at 19:04

I think you are trying to access the DOM in the main process, which is not technically possible. You should transfer all the DOM related code to the renderer process. For that, just move this part of your code:

const resultEl = document.getElementById('result');
const lengthEl = document.getElementById('length');
const uppercaseEl = document.getElementById('uppercase');
const lowercaseEl = document.getElementById('lowercase');
const numbersEl = document.getElementById('numbers');
const symbolsEl = document.getElementById('symbols');
const generateEl = document.getElementById('generate');
const clipboard = document.getElementById('clipboard');

const randomFunc = {
    lower: getRandomLower,
    upper: getRandomUpper,
    number: getRandomNumber,
    symbol: getRandomSymbol
}

clipboard.addEventListener('click', () => {
    const textarea = document.createElement('textarea');
    const password = resultEl.innerText;

    if(!password) { return; }

    textarea.value = password;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    textarea.remove();
    alert('Password copied to clipboard');
});

generate.addEventListener('click', () => {
    const length = +lengthEl.value;
    const hasLower = lowercaseEl.checked;
    const hasUpper = uppercaseEl.checked;
    const hasNumber = numbersEl.checked;
    const hasSymbol = symbolsEl.checked;

    resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length);
});

function generatePassword(lower, upper, number, symbol, length) {
    let generatedPassword = '';
    const typesCount = lower + upper + number + symbol;
    const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0]);

    // Doesn't have a selected type
    if(typesCount === 0) {
        return '';
    }

    // create a loop
    for(let i=0; i<length; i+=typesCount) {
        typesArr.forEach(type => {
            const funcName = Object.keys(type)[0];
            generatedPassword += randomFunc[funcName]();
        });
    }

    const finalPassword = generatedPassword.slice(0, length);

    return finalPassword;
}

function getRandomLower() {
    return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}

function getRandomUpper() {
    return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
    return +String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}

function getRandomSymbol() {
    const symbols = '!@#$%^&*(){}[]=<>/,.'
    return symbols[Math.floor(Math.random() * symbols.length)];
}

You can just put this in a <script> tag in your index.html file or create a new js file and then use

<script>
require('relative path to your file')
</script>

PS For using this, you must set nodeIntegration: true in your webPreferences. (Already there in your code)

Jalaj thank you so much there are no longer any errors. I had a feeling I had to require the file and put my code elsewhere I just wasn't sure how to require it. Problem, the javascript doesn't seem to be doing anything as clicking the generate button isn't giving my anything in my generator? — JipBit, Jul 12 '20 at 19:15

Is there a way I can define document?

1 Answers1