3

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

Improve this question
6
  • 1
    Do you have a definition file (.d.ts) for Electron? Without that, the Typescript language service won't be able to tell that it exists. Commented Feb 29, 2016 at 11:42
  • 1
    In fact, I've just noticed that the repo you cloned has a typings.json - try running npm install typings -g then typings install in the project directory. Commented Feb 29, 2016 at 11:43
  • Thanks Joe. After I saw Basarat's answer I checked and saw the "typings" directory was already in the repository files. I did try installing typings (npm install -g typings & typings install). Commented Mar 1, 2016 at 11:30
  • However after running these commands and recompiling i saw the error - error TS2300: Duplicate identifier <variable-name> for files "typings/browser/ambient/github-electron/github-electron.d.ts" and "typings/browser/ambient/electron/electron.d.ts". Commented Mar 1, 2016 at 11:33
  • 1
    This is due to them providing separate definition files for server-side and client-side - you can find instructions on fixing the issue here: github.com/typings/typings#maindts-and-browserdts. I'm not sure which one you should exclude for an Electron project, so you might have to try both. Commented Mar 1, 2016 at 12:15

2 Answers 2

Reset to default
3

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

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

1 Comment

Using [email protected] I need to use the following: "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/cli.js"
1

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.

Improve this answer

1 Comment

Thanks Basarat - I tried the new typescript arguments in both the command line '.vscode/tasks.json' file and from the command line. Unfortunately I saw the same error as before when attempting to launch the application in vs code.

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.