I am currently working on a personal project using Electron and Typescript. Both my Main.js and Renderer.js files are in Typescript and compiled. My issue is with the "remote" variable in my template (main.html). While it works within the template, I can't access it in my Typescript app. Here's an example:
// Template - main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
// other meta tags...
</head>
<body>
<div id="mount"></div>
<script src="../node_modules/react/dist/react.js></script>
<script src="../node_modules/react-dom/dist/react-dom.js></script>
<script type="text/javascript>
window.remote = require('electron').remote;
console.log(remote); // Works inside this script tag
<script src="http://localhost:8080/static/main.bundle.js></script>
</body>
</html>
While it works within the script tag, it doesn't work in my app. This used to work in another project without any issues. My workaround involves importing the "remote" module into each file before using it. However, this only works with separate webpack configs for different targets - 'electron-renderer' for React and 'electron-main' for Electron.
// TitleBar.tsx
import * as React from "react";
import { Component } from "react";
export default class TitleBar extends Component<any, any> {
public _close(){
remote.getCurrentWindow().close(); // This doesn't work!
// Requires separate webpack targets and global variables in template
}
public render() {
return <button onClick={this._close}>Close Window</button>;
}
}
Without setting the proper webpack targets, electron modules won't load. With correct targets, the code should function as expected:
// TitleBar.tsx
import * as React from "react";
import { Component } from "react";
import { remote } from "electron";
export default class TitleBar extends Component<any, any> {
public _close(){
remote.getCurrentWindow().close(); // This works now!
// Proper webpack targets and no need for global variables in template
}
public render() {
return <button onClick={this._close}>Close Window</button>;
}
}
I find it inconvenient to import "remote" every time I need it. Why isn't it working as it used to? Is it an issue with Webpack or Typescript? Any help would be appreciated!