#Electron Issue

46 messages · Page 1 of 1 (latest)

green talon
#

Hi, I'm fairly new to typescript and I'm trying to setup my electron project but I keep getting this error:

TypeError: Cannot read properties of undefined (reading 'on')
    at /Users/thomasanwandter/Developer/electron-game/src/main.ts:2:74
    at Object.<anonymous> (/Users/thomasanwandter/Developer/electron-game/src/main.ts:3:3)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)

Node.js v20.15.1```
verbal depot
#

if you could show the section that's erroring directly, preferably in a playground, that would be more helpful

green talon
# 
import { app, BrowserWindow } from "electron";

let win = null;

app.on("ready", () => {
    win = new BrowserWindow({width: 800, height: 600});
});```
verbal depot
#

seems like electron isn't exporting anything named app

green talon
#

odd

#

i followed the guide

verbal depot
#
  • are you intending to use cjs or esm?
  • are you running via node directly?
green talon
#

i tried a different one:

import { app, BrowserWindow } from 'electron'

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})``` same error
green talon
verbal depot
#

have you tried compiling then running the result?

green talon
#

no

#

idrk how to compile an electron app

verbal depot
#

tsc, then node the result

#

(tsc without arguments)

green talon
# 
tsc

                                                                               
                This is not the tsc command you are looking for                
                                                                               

To get access to the TypeScript compiler, tsc, from the command line either:

- Use npm install typescript to first add TypeScript to your project before using npx
- Use yarn to avoid accidentally running code from un-installed packages```
verbal depot
#

ah, npx tsc if you don't have it globally (which you shouldn't, i just forgot to mention it)

green talon
#

same error

# 
node src/main.js
/Users/thomasanwandter/Developer/electron-game/src/main.js:11
electron_1.app.whenReady().then(function () {
               ^

TypeError: Cannot read properties of undefined (reading 'whenReady')
    at Object.<anonymous> (/Users/thomasanwandter/Developer/electron-game/src/main.js:11:16)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)
    at node:internal/main/run_main_module:28:49

Node.js v20.15.1```
verbal depot
green talon
#

idk what they r

verbal depot
#

import vs require

green talon
#

import

verbal depot
#

looks like you're compiling to cjs

green talon
#

im guessing thats a bad thing

verbal depot
#

make sure you have type: module in package.json and module: nodenext in tsconfig

verbal depot
green talon
verbal depot
#

now's the time to make one then

green talon
#

done

# 
{
    "module": "NodeNext"
}```
verbal depot
#

it needs to be inside compilerOptions

#

while you're at it also set strict to true

#

!hb tsconfig

tepid fableBOT
green talon
#

yeah just realised

green talon
# 
Object.defineProperty(exports, "__esModule", { value: true });
                      ^

ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/thomasanwandter/Developer/electron-game/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/thomasanwandter/Developer/electron-game/src/main.js:2:23
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:123:5)

Node.js v20.15.1``` i might be getting ahead of myself
verbal depot
verbal depot
green talon
green talon
verbal depot
#

make sure the tsconfig.json is at package root, beside package.json

verbal depot
verbal depot