I am building an electron app using typescript. I have set up my tsconfig as follows:
{
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"outDir": "./build", /* Redirect output structure to the directory. */
"strict": true, /* Enable all strict type-checking options. */
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
},
"include": [
"./src"
]
}
I have to mention that I am not using webpack or browsify.
So, I have to typescript files at the moment, one responsible for creating the main window and one responsible of handling events (basically one for the main thread and one for the renderer). I am using only imports in both of them, no exports. The problem is that in the renderer script (in it's javascript form) I get this line after running tsc : Object.defineProperty(exports, "__esModule", { value: true });, which causes the 'exports not defined' error when running the app.
I've tried removing the module property from tsconfig as suggested in other posts, but it didn't help. If I remove that line of code in the javascript file, everything works. But I don't know what I should do to stop tsc from adding that line of code, since in the other javascript file it doesn't appear. Thanks in advance for helping!
Here are my typescript files with their compiled javascript equivalents
app.ts
import {app,BrowserWindow,desktopCapturer, DesktopCapturerSource} from 'electron';
import * as path from 'path';
function createWindow(){
const mainWindow:BrowserWindow = new BrowserWindow({
width:800,
height:600
});
mainWindow.loadFile(path.join(__dirname,"../src/assets/index.html"));
mainWindow.webContents.openDevTools()
}
app.on('ready',createWindow);
app.js
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var electron_1 = require("electron");
var path = __importStar(require("path"));
function createWindow() {
var mainWindow = new electron_1.BrowserWindow({
width: 800,
height: 600
});
mainWindow.loadFile(path.join(__dirname, "../src/assets/index.html"));
mainWindow.webContents.openDevTools();
}
electron_1.app.on('ready', createWindow);
renderer.ts
import { desktopCapturer, DesktopCapturerSource } from "electron";
function onLoad(){
desktopCapturer.getSources({
thumbnailSize: {
width: 256,
height: 256,
},
types: ["screen", "window"]
}, (error: Error, srcs: DesktopCapturerSource[]) => {
if (error)
throw error;
let p: HTMLElement | null = document.querySelector("#tag");
for (let src of srcs)
if (p){
let temp = src.name + ' ';
p.textContent += src.name;
}
})
}
document.addEventListener("DOMContentLoaded", onLoad);
renderer.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var electron_1 = require("electron");
function onLoad() {
electron_1.desktopCapturer.getSources({
thumbnailSize: {
width: 256,
height: 256,
},
types: ["screen", "window"]
}, function (error, srcs) {
if (error)
throw error;
var p = document.querySelector("#tag");
for (var _i = 0, srcs_1 = srcs; _i < srcs_1.length; _i++) {
var src = srcs_1[_i];
if (p) {
var temp = src.name + ' ';
p.textContent += src.name;
}
}
});
}
document.addEventListener("DOMContentLoaded", onLoad);