0

Hello i am new to electron. I am tring to use npm modules in renderer.js file but it keeps giving me:

Uncaught ReferenceError: require is not defined

I checked other questions on stackoverflow this for example:

Electron require() is not defined

i tried the solution on there but did not solved my problem

main.js file

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

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    })

    win.loadFile('index.html')
}

app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
        if(BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>

    <title>Electron!</title>
</head>
<body>
    <div class="text-center container">
        <div class="form-group">
            <label class="p-5" for="link">Video Link</label>
            <input type="text" class="form-control" id="link" placeholder="enter youtube link!">
        </div>
        <button type="submit" class="btn btn-primary" onclick="searchURL()">Enter!</button>
    </div>

    <script src="./renderer.js"></script>
</body>
</html>

renderer.js

const fs = require('fs');
Berk Efe Keskin
  • 53
  • 7
  • You've actually duplicated the question you've linked because it's the same problem. Also, "the solution" isn't helpful because there are plenty of solutions posted as answers to that question. I propose you try a few of them, especially [this one](https://stackoverflow.com/a/57049268), and come back later by [edit]ing your question if you have a clear description of what "doesn't work". – Alexander Leithner Nov 16 '22 at 12:53
  • (I have been tring to solve this for 2 days btw...) @AlexanderLeithner the one u said is not worked either... i have no problem with preload.js script but i got problem when i try to use require on renderer.js :/ – Berk Efe Keskin Nov 16 '22 at 20:11
  • That's the whole point. You can't use `require()` in renderer scripts anymore. That's why there are preload scripts. It's probably worthwile reading [the official tutorial](https://www.electronjs.org/docs/latest/tutorial/tutorial-preload). Other than that, the other question is a very comprehensive resource. – Alexander Leithner Nov 17 '22 at 08:13

0 Answers0