7

I try to get the ipcRenderer module from electron in typescript to send informations from the current component to the core and to get informations back to the window (electron-chromium-browser). All I get is a error "Module not found" by transcoding the ts-code to ES5.

const ipc = require('electron').ipcRenderer;`

Update: The Error is switching between the "Module not found" and this one:

ERROR in ./~/electron/index.js Module build failed: Error: ENOENT, open '/.../node_modules/electron/index.js' @ ./app/components/search/search.ts 12:10-29

That is from the current electron-api. I have also tried to use the import syntax from typescript but the result is the same.

Than I tried to use the electron.ipcRenderer module in a ES5-file, loaded/linked directly in the html-file.

There it worked. Why?

2er0
  • 361
  • 2
  • 11

5 Answers5

5

Solved the problem after 10h searching. Problem was the webpack-transcoder.

https://github.com/chentsulin/webpack-target-electron-renderer

https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.development.js

2er0
  • 361
  • 2
  • 11
  • 3
    can you explain a little bit more how you fixed it please? :) – stephanec Feb 11 '16 at 20:15
  • 2
    in my case i use webpack to transcode typescript code to es5, in that way I have a `webpack.config.js`-File. In that config you have to send the hole config through `webpackTargetElectronRenderer(config)` to `config.target`. it should looks like that: `var config = {.....}; config.target = webpackTargetElectronRenderer(config); module.exports = config;` – 2er0 Feb 15 '16 at 09:33
3

Since electron dependency in the browser app is not real, meaning it's not webpacked from node_modules but instead loaded in runtime, the require statement caused errors such as "fs" not found for me.

However you can trick the typescript with this:

if (typeof window['require'] !== "undefined") { let electron = window['require']("electron"); let ipcRenderer = electron.ipcRenderer; console.log("ipc renderer", ipcRenderer); }

Also if you are writing a web app, which only is augmented by electron when it's running inside, this is a better way since you don't have to add electron as a dependency to your webapp just when using the communication parts.

Ciantic
  • 6,064
  • 4
  • 54
  • 49
  • Thank you, this is not obvious an under documented. I've been searching for hours for this. I feel there's probably a more elegant solution but this gets me moving again. – digitaldreamer Oct 18 '16 at 18:52
  • I don't know why this works when `await import('electron')` doesn't, but after spending all day on this I'm not going to question it – AvahW Jul 06 '21 at 18:09
1

Than I tried to use the electron.ipcRenderer module in a ES5-file, loaded/linked directly in the html-file.

If it works in html but fails in ts it means the error is not in const ipc = require('electron').ipcRenderer;. The error is most likey in the import you have to load your file from html (and not require('electron')).

basarat
  • 261,912
  • 58
  • 460
  • 511
0

This solved the problem for me:

You can fix it, just add to the "package.json"

"browser": {
"fs": false,
"path": false,
"os": false }

Source: https://github.com/angular/angular-cli/issues/8272#issuecomment-392777980

drewjosh
  • 31
  • 1
  • 5
0

You can trick ts with this (dirty hack, but it works):

const { ipcRenderer } = (window as any).require("electron");

Lexmee
  • 1