Import jQuery with contextBridge

I’m trying to use contextBridge in Electron, but I keep getting an error when I try to require('jQuery') in preload.js. Here is my preload.js:

const { contextBridge, ipcRenderer } = require('electron')
require('jQuery')

contextBridge.exposeInMainWorld(
    'ipcRenderer',
    {
      send: (channel, arg) => ipcRenderer.send(channel, arg),
      on: (event, data) => ipcRenderer.on(event, data)
    }
)

JavaScript
​x
 
const { contextBridge, ipcRenderer } = require('electron')
require('jQuery')
​
contextBridge.exposeInMainWorld(
    'ipcRenderer',
    {
      send: (channel, arg) => ipcRenderer.send(channel, arg),
      on: (event, data) => ipcRenderer.on(event, data)
    }
)
​

As soon as I put require('jQuery'), I get this error:

I want to import APIs like this since it improves security and contextIsolation will be enabled by default in later versions of Electron.

Answer

I have no idea if this is secure or not, but I just imported jQuery from index.html:

  <head>
    <meta charset="UTF-8">
    <title>Gemini</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self'">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="macos.css">
    <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">
  </head>

JavaScript
 
  <head>
    <meta charset="UTF-8">
    <title>Gemini</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self'">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="macos.css">
    <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">
  </head>
​

Advertisement

Answer