CODEWITHSUNDEEP
javascriptnode.jstypescriptelectron
Zoey
Zoey

Reputation: 516

Why I'm getting "exports is not defined" on my renderer process?

I'm migrating a existing electron project to a typescript-electron project, to get familiar with it. However, when I try to run the electron app I get this error: Uncaught ReferenceError: exports is not defined at renderer.js:2

I didn't understand it once my tsconfig.json is that: 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist/src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

My start script: "start": "tsc && electron ./dist/src/main"

I searched about it and found a electron-typescript boilerplate here and searched some projects using it, all those used import/export and did'nt raise any errors.

Workaround

On renderer.js I commented the part that is giving me the error, so the new file is:

"use strict";
//Object.defineProperty(exports, "__esModule", { value: true });
var electron_1 = require("electron");
var suBtn = document.querySelector("input#sb");
var result = document.querySelector("div#result");
suBtn.addEventListener("click", function (event) {
  event.preventDefault();
  var pathElement = document.querySelector("input#file");
  if (pathElement.files !== null) {
    var path = pathElement.files[0].path;
    electron_1.ipcRenderer.on("duration", function (event, duration) {
      result.innerHTML = "Video is " + duration + " seconds!";
    });
    electron_1.ipcRenderer.send("video:submit", path);
  }
});

Renderer.ts:

import { ipcRenderer as ipc } from "electron";

const suBtn = document.querySelector("input#sb") as HTMLInputElement;

const result = document.querySelector("div#result") as HTMLDivElement;

suBtn.addEventListener("click", (event) => {
  event.preventDefault();

  const pathElement = document.querySelector("input#file") as HTMLInputElement;

  if (pathElement.files !== null) {
    const path = pathElement.files[0].path;
    ipc.on("duration", (event, duration) => {
      result.innerHTML = `Video is ${duration} seconds!`;
    });
    ipc.send("video:submit", path);
  }
});

So, I need to manually comment this line every time?

Upvotes: 1

Views: 1954

Answers (1)

Andreas Dolk
Andreas Dolk

Reputation: 114797

This looks like a known issue on typescript: https://github.com/microsoft/TypeScript/issues/30718

From what I understand, it may happen when you have a target commonjs and a typescript file that imports but doesn't export (normal for the renderer file).

Some did the same like you, removing that line and event automated that with a watcher.

I also see that there is a pull request that introduces a new config flag so that you could suppress that line, but that's pending since September lase year.

The comments mention another 'hack' and I'd do that on the script: just add a variable 'exports' yourself. It has to be var, const or let won't work:

  // see: https://github.com/microsoft/TypeScript/issues/30718#issuecomment-479609634
  var exports:any = {};

Upvotes: 1

Related Questions