2

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);

2 Answers 2

1

I'm not positive but I think this should help:

// TypeScript considers non-module files to be files without `export`s.
// https://stackoverflow.com/a/41975448/5051090
export {};

https://stackoverflow.com/a/41975448/5051090

Try tacking it on to the bottom of your modules.

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

Comments

0

I figured it out! The problem was the compile target. Switcging from es5 to es6 fixed the issue

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.