Question

Technologies:

javascript

node.js

Tolerim

9 hours ago

How do I utilize node_modules with textisolation set to true?

Currently, I am developing an Electron application. However, when I package my application with the textisolation: true parameter, a blank screen appears. Setting it to false results in my modules, such as jquery or sqlite3, being undefined. I have provided three pieces of code to better explain my situation.

The first code is the main.js file:

const path = require('path');
const { app, BrowserWindow, screen } = require('electron')
const EventEmitter = require('events')
app.commandLine.appendSwitch("ignore-certificate-errors");
const loadingEvents = new EventEmitter()
let win
app.on('ready', () => {  
  const { width, height } = screen.getPrimaryDisplay().workAreaSize
  window = new BrowserWindow({
  width, height,
  minWidth:970,
  minHeight:390,
  icon: 'icon.png',
  webPreferences: {
    nodeIntegration: true,
    enableRemoteModule: true,
    contextIsolation: true,
    webSecurity: false,
    }
  })
    window.loadFile((path.join(dirname, '/html/loading.html')))

    // The loadingEvents object listens for 'finished'
    loadingEvents.on('finished', () => {
    window.loadFile((path.join(dirname, '/html/index.html')))
    window.webContents.openDevTools()
 })

    setTimeout(() => loadingEvents.emit('finished'), 5000)
})

The second code is the index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <link rel="stylesheet" href="../css/index.css" type="text/css">
    <title>MyApp</title>
  </head>
  <body class="container">
    <div class="topnav" id="myTopnav">
      <a id="name">MyApp</a>
      <a href='index.html'>Home</a>
      <a href='get.html'>Live TV</a>
      <a href='post.html'>Movies</a>
      <a href='inline.html'>Series</a>
      </a>
    </div>
  </body>
  <script src="../js/index.js"></script>
</html>

The third code is the index.js file:

const { get } = require('jquery');
var $ = jQuery = require("jquery")
var mysql = require('mysql');
var sq = require('sqlite3');
require('dotenv').config()

Unfortunately, none of the solutions I have tried have been successful. Do you have any suggestions on how I can solve this problem? I would appreciate any help you can offer.

Thank you very much for considering my problem.

Answers(1)

Accepted Answer

The issue here is most likely related to Electron's context isolation security feature, which is enabled in the webPreferences. When contextIsolation is set to true, the renderer process is isolated from the Node.js and Electron APIs, which means that you cannot access modules like jquery or sqlite3 directly in your HTML or renderer code. To work around this issue, you can use the preload script feature in Electron to expose these modules to your renderer code. Here's an example: 1. Create a new file called preload.js in the same directory as your main.js file. 2. In preload.js, require the modules you need and add them to the global window object like this:

window.$ = window.jQuery = require("jquery");
window.mysql = require('mysql');
window.sq = require('sqlite3');

3. In your BrowserWindow configuration object, add the preload property and set it to the path of your preload.js file:

webPreferences: {
  nodeIntegration: false,
  contextIsolation: true,
  enableRemoteModule: false,
  preload: path.join(__dirname, 'preload.js')
}

4. In your renderer process code (e.g. index.js), you can now access these modules via the window object:

const $ = window.$;
const mysql = window.mysql;
const sq = window.sq;

Note that you need to use the $ variable instead of jQuery in your renderer code, as jQuery is not exposed directly to the renderer process. With this setup, you should be able to access the jquery and sqlite3 modules in your renderer code even when contextIsolation is set to true.