CODEWITHSUNDEEP
typescriptelectronvisual-studio-code
Michael
Michael

Reputation: 301

Launching Typescript app in Visual Studio Code throws error "Cannot find module 'electron'"

When attempting to launch a typescript application in Visual Studio Code (vs code) I'm getting the error "Cannot find module 'electron'". The project I'm trying to launch is black-screen which I have cloned from github.

This error is thrown on the following statement:

import {ipcMain, nativeImage} from "electron";

(on line 3 of the file https://github.com/shockone/black-screen/blob/master/src/main/Main.ts#l3)

I can transpile the application using the typescript-compiler (tsc) and no errors are generated, and can see the compiled javascript in the folder I expect (src/bin/). I can also start the application successfully using npm ("npm start").

Below are the relevant project configuration files:

  1. src/tsconfig.json

    {
    "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noEmitOnError": true,
    "pretty": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "bin"
  }
}

  2. .vscode/tasks.json file Note. Executing the equivalent command in a terminal "tsc --project src --moduleResolution node" generates the transpiled js code with no errors or warnings.

    {
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": ["--project", "src", "--moduleResolution", "node"],
    "problemMatcher": "$tsc"
}

  3. .vscode/launch.json

    {
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Black-Screen",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/main/Main.ts",
            "stopOnEntry": false,
            "cwd": "${workspaceRoot}/src",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/src/bin"
        }
    ]
}

Btw. the project structure is:

|.vscode/
|-- launch.json
|-- tasks.json
|decorators/
|...
|node_modules/
|-- bin/
|-- abbrev/
|-- acorn/
|README/
|-- <image files>
|src/
|-- bin/
|-- main/
|---- Main.ts
|---- Menu.ts
|...
|-- tsconfig.json
|...
|stylesheets/
|...
|test/
|...
|typings/
|...
|.babelrc
|.gitignore
|.npmrc
|...
|gulfile.bable.js
|package.json
|...

Any help would be appreciated :)

Upvotes: 3

Views: 4879

Answers (2)

Michael
Michael

Reputation: 301

I fixed the error with the electron module not being recognized by the debugger. The problem was due to the electron application not starting prior to my application being launched.

I found a stackoverflow question and linked blog post which addressed this issue - Debugging Electron-Atom script with Visual Studio Code /
http://www.mylifeforthecode.com/a-better-way-to-launch-electron-from-visual-studio-code/

Adding the line "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron" to my "launch.json" file started electron before the debugger launched.

My final "launch.json" file was:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Black-Screen",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/main/Main.ts",
            "stopOnEntry": false,
            "cwd": "${workspaceRoot}/src",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/src/bin",
            "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron"
        }
    ]
}

The debugger is stopping at the breakpoints I set. I noticed the performance of electron is much slower using the debugger but that's another issue I'll work through :)

Upvotes: 3

basarat
basarat

Reputation: 275947

The project contains https://github.com/shockone/black-screen/blob/master/typings/main/ambient/github-electron/github-electron.d.ts and the module is declared : https://github.com/shockone/black-screen/blob/master/typings/main/ambient/github-electron/github-electron.d.ts#L1884

Suspect wrong line: 

"args": ["--project", "src", "--moduleResolution", "node"],

Change to : 

"args": ["-p", "./src"],

As that has worked for me in the past.

Upvotes: 1

Related Questions