A problem with import in TypeScript/Electron.js

Question

I have a file index.ts:

import { app, BrowserWindow } from 'electron'
let win

app.on('ready', () => {
  win = new BrowserWindow({
    minHeight: 640,
    minWidth: 480,
    frame:false
  })
  win.loadFile('index.html')
})

If I try to run with: npm start, I got an error:

import { app, BrowserWindow } from 'electron'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1051:16)
    at Module._compile (internal/modules/cjs/loader.js:1101:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1166:10)
    at Module.load (internal/modules/cjs/loader.js:981:32)
    at Module._load (internal/modules/cjs/loader.js:881:14)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at loadApplicationPackage (D:\VS Projects\Electron App\node_modules\electron\dist\resources\default_app.asar\main.js:109:16)
    at Object.<anonymous> (D:\VS Projects\Electron App\node_modules\electron\dist\resources\default_app.asar\main.js:155:9)
    at Module._compile (internal/modules/cjs/loader.js:1145:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1166:10)

My package.json:

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "dependencies": {
    "electron": "^10.1.2"
  },
  "devDependencies": {},
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module"
}

How I can solve it?

Electron will not work with import statements. It uses a Nodejs based environment which doesn't support this syntax. You have to use require instead. — Chris
– Chris, Commented Sep 17, 2020 at 17:07
Oh, sorry, I'm make a mistake! Its not JS, I use Typescript with electron. — alexsey bobrovitch
– alexsey bobrovitch, Commented Sep 17, 2020 at 17:15
Okay, it's at least something... Thanks, @Chris! You can do this as answer — alexsey bobrovitch
– alexsey bobrovitch, Commented Sep 17, 2020 at 17:24

Chris · Accepted Answer · 2020-09-17 17:28:36Z

4

It looks like you are trying to use TypeScript with Electron. Electron has types available, however it doesn't directly support executing TypeScript right out of the box. You will need to perform some additional steps to get things working. This goes a bit out of scope of an answer, and would need to be more of a tutorial or example, so I'll provide you with an example from GitHub.

You can view an example of getting started with TypeScript and Electron Here.

answered Sep 17, 2020 at 17:28

Chris

1,5841 gold badge12 silver badges19 bronze badges

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

Comments

Maifee Ul Asad · Accepted Answer · 2021-11-05 17:28:43Z

4

Electron runs through node.js and node.js is behind and uses commonjs import syntax.

To import we do:

const {app} = require("electron");

// equivalent to
//import {app} from 'electron' <- don't use in electron

to export we do:

module.exports = app;

// equivalent to
//export default app; <- don't use in electron

edited Nov 5, 2021 at 17:28

Maifee Ul Asad

4,68910 gold badges52 silver badges120 bronze badges

answered Sep 17, 2020 at 17:08

Nano Adam

2951 silver badge5 bronze badges

Collectives™ on Stack Overflow

A problem with import in TypeScript/Electron.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related