how to load electron module in typescript

Question

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?

have you tried using the electron-compile module that has support for TS and ES6 and all? — frosty
– frosty, Commented Jan 7, 2016 at 7:27
Another Q/A solved my issue: stackoverflow.com/questions/62467092/… — Jeffrey Martinez
– Jeffrey Martinez, Commented Apr 11, 2021 at 4:30

2er0 · Accepted Answer · 2016-01-07 14:24:24Z

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

answered Jan 7, 2016 at 14:24

2er0

3602 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

stephanec Over a year ago

can you explain a little bit more how you fixed it please? :)

2er0 Over a year ago

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;

Ciantic · Accepted Answer · 2016-10-09 11:09:08Z

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.

answered Oct 9, 2016 at 11:09

Ciantic

5,8144 gold badges61 silver badges50 bronze badges

2 Comments

digitaldreamer Over a year ago

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.

AvahW Over a year ago

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

basarat · Accepted Answer · 2016-01-06 22:25:51Z

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')).

answered Jan 6, 2016 at 22:25

basarat

278k61 gold badges475 silver badges528 bronze badges

Comments

drewjosh · Accepted Answer · 2020-10-06 18:37:11Z

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

answered Oct 6, 2020 at 18:37

drewjosh

611 silver badge7 bronze badges

Comments

Lexmee · Accepted Answer · 2021-01-23 21:46:38Z

0

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

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

answered Jan 23, 2021 at 21:46

Lexmee

1

Collectives™ on Stack Overflow

how to load electron module in typescript

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related