require is not defined when putting ipcRenderer.on in /src/renderer.ts

[raphael10-collab]

Hi!!
Thank you for this excellent electron-react-webpack-typescript starting point.

I'm trying to start from it to transpose within it this other simple example of two windows communication:https://github.com/kahlil/electron-communication-example

But I'm encountering this hurdle: when inserting into /src/renderer.ts these lines:

ipcRenderer.on('messageFromMain', (event, message) => {
  console.log(`This is the message from the second window sent via main: ${message}`);
});

I get this error:

This is the entire /src/renderer.ts file:

import './app';

console.log('renderer.js is so happy to say you 👋 hello....');

import { ipcRenderer, BrowserWindow } from 'electron';

ipcRenderer.on('messageFromMain', (event, message) => {
  console.log(`This is the message from the second window sent via main: ${message}`);
});

Based on what I found here: // https://stackoverflow.com/questions/44008674/how-to-import-the-electron-ipcrenderer-in-a-react-webpack-2-setup , I've also put in tools/webpack/webpack.plugins.js :

const webpack = require('webpack');

module.exports = [
  new ForkTsCheckerWebpackPlugin(),
 new webpack.ExternalsPlugin('commonjs', [
    'electron'
  ])
];

I tried to import electron in renderer.ts as a window component:

const electron = window.require('electron');

But got:

window.require is not a function

It must be something related to the interaction among electron, react and webpack, but I didn' find any solution yet.
Would you be so kind in helping me?

[codesbiome]

Hello @raphael10-collab

Its good to know this boilerplate been a good starting point for you.

For the issues you mentioned regarding:

require is not defined

Can you try the same process with following WebPreference configuration in main.ts file for Electron Window
(similar to #4 (comment))

    webPreferences: {
      nodeIntegration: true, // Changed 
      enableRemoteModule: false,
      contextIsolation: false, // Changed
      nodeIntegrationInWorker: false,
      nodeIntegrationInSubFrames: false,
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },

In this boilerplate nodeIntegration is disabled & contextIsolation enabled by default for some security purposes

[raphael10-collab]

With

webPreferences: {
  nodeIntegration: true, // Changed 
  enableRemoteModule: false,
  contextIsolation: false, // Changed
  nodeIntegrationInWorker: false,
  nodeIntegrationInSubFrames: false,
  preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
},

it doesn't give

require is not defined

when inserting in renderer.ts:

ipcRenderer.on('messageFromMain', (event, message) => {
  console.log(`This is the message from the second window sent via main: ${message}`);
});

So.. the hurdle now changes:
how to keep for security purposes

nodeIntegration:false,
contextIsolation: true,

and being able in the same time to import ipcRenderer in renderer.ts?
There must be a way to make renderer.ts and main.ts communicate with each other, while keeping the environment as much as secure as possibile.

[codesbiome]

How about using/importing ipcRender into preload.ts instead of renderer.ts ?

There must be a way to make renderer.ts and main.ts communicate with each other, while keeping the environment as much as secure as possibile.

For the communication between both main and renderer process, how about using following methods instead:

// Main process
ipcMain.handle('my-invokable-ipc', async (event, ...args) => {
  const result = await somePromise(...args)
  return result
})

// Renderer process
async () => {
  const result = await ipcRenderer.invoke('my-invokable-ipc', arg1, arg2)
  // ...
}

[raphael10-collab]

When importing ipcRenderer in preload.ts instead of renderer.ts:

import { ipcRenderer } from 'electron'; // in preload.ts

It seems that renderer.ts doesn't recognize ipcRenderer :

ERROR in src/renderer.ts:14:24
TS2304: Cannot find name 'ipcRenderer'.
    12 | 
    13 | async () => {
  > 14 |   const result = await ipcRenderer.invoke('my-invokable-ipc', "this is my message")
       |                        ^^^^^^^^^^^
    15 |   // ...
    16 | }

[raphael10-collab]

I defined the 'electron-renderer' as target in /tools/webpack/webpack.renderer.js :

/* eslint-disable @typescript-eslint/no-var-requires */
const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
const aliases = require('./webpack.aliases');

module.exports = {
  target: 'electron-renderer',
  module: {
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
    alias: {
      // React Hot Loader Patch
      'react-dom': '@hot-loader/react-dom',
      // Custom Aliases
      ...aliases,
    },
  },
};

But still get the error :

ERROR in src/renderer.ts:14:24
TS2304: Cannot find name 'ipcRenderer'.

I tried to import ipcRenderer in preload.js as follows:

window.ipcRenderer = require('electron').ipcRenderer;

But I get

TS2339: Property 'ipcRenderer' does not exist on type 'Window & typeof globalThis'.
window.ipcRenderer = require('electron').ipcRenderer;
   |        ^^

Following these indications: electron/electron#9920 (comment)
I also handled ipcRenderer in preload.js as follows :

import { ipcRenderer, IpcRenderer } from 'electron'

declare global {
  namespace NodeJS {
    interface Global {
      ipcRenderer: IpcRenderer
    }
  }
}

// Since we disabled nodeIntegration we can reintroduce
// needed node functionality here
process.once('loaded', () => {
  global.ipcRenderer = ipcRenderer
})

But I get the same error in renderer.ts:

ERROR in src/renderer.ts:14:24
TS2304: Cannot find name 'ipcRenderer'.

[codesbiome]

Just tried using following in preload.ts it shows console output without any issue:

// preload.ts

import { ipcRenderer } from 'electron';
console.log(ipcRenderer);

I tried to import ipcRenderer in preload.js as follows:
window.ipcRenderer = require('electron').ipcRenderer;

Instead of exposing ipcRenderer to the window (global) object, try making use of context-bridge approach within preload.ts to expose custom APIs for application (browser) window. https://www.electronjs.org/docs/api/context-bridge

[raphael10-collab]

I just followed the example in https://www.electronjs.org/docs/api/context-bridge#contextbridge

preload.js :

import { ipcRenderer, contextBridge } from 'electron';

contextBridge.exposeInMainWorld(
  'electron',
  {
    doThing: () => ipcRenderer.send('do-a-thing')
  }
)

renderer.js :

import './app';

console.log('renderer.js is so happy to say you 👋 hello....');

window.electron.doThing();

Error:

ERROR in src/renderer.ts:5:8
TS2551: Property 'electron' does not exist on type 'Window & typeof globalThis'. Did you mean 'Electron'?
    3 | console.log('renderer.js is so happy to say you 👋 hello....');
    4 | 
  > 5 | window.electron.doThing();
      |        ^^^^^^^^

[codesbiome]

ERROR in src/renderer.ts:5:8
TS2551: Property 'electron' does not exist on type 'Window & typeof globalThis'. Did you mean 'Electron'?
    3 | console.log('renderer.js is so happy to say you 👋 hello....');
    4 | 
  > 5 | window.electron.doThing();
      |        ^^^^^^^^

Following is compilation error by typescript compiler because of window.electron object unknown property type.
You will need to declare these additional properties as custom type/interface for Window object inside index.d.ts file.
for example :

// index.d.ts

declare interface Window {
  electron: {
    doThing(): void
  }
}

[raphael10-collab]

Yes. Now it seems working with:

in main.js

webPreferences: {
  nodeIntegration: false,
  enableRemoteModule: false,
  contextIsolation: true,
  nodeIntegrationInWorker: false,
  nodeIntegrationInSubFrames: false,
  preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
},

preload.js :

import { ipcRenderer, contextBridge } from 'electron';

contextBridge.exposeInMainWorld(
  'electron',
  {
    doThing: () => ipcRenderer.send('do-a-thing')
  }
)

index.d.ts :

declare interface Window {
  electron: {
    doThing(): void
  }
}

and renderer.ts :

import './app';

console.log('renderer.js is so happy to say you 👋 hello....');

window.electron.doThing();

Thank you very much @codesbiome !!!!

[codesbiome]

Your welcome @raphael10-collab
Cheers!

This issue will be converted into Discussion.