CODEWITHSUNDEEP
javascriptnode.jstypescriptipcelectron
2er0
2er0

Reputation: 361

how to load electron module in typescript

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?

Upvotes: 7

Views: 4856

Answers (5)

Lexmee
Lexmee

Reputation: 1

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

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

Upvotes: 0

drewjosh
drewjosh

Reputation: 61

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

Upvotes: 0

Ciantic
Ciantic

Reputation: 5774

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.

Upvotes: 3

2er0
2er0

Reputation: 361

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

Upvotes: 5

basarat
basarat

Reputation: 276185

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

Upvotes: 1

Related Questions