Cannot find module 'electron'

Question

I'm working on a Node.js app that's using the "0.34.3" version of Electron.

The problem that I'm having is that when I try to include the 'electron' module in a renderer process as follows require('electron').remote; and when I npm start--I get the following error:

{ [Error: Cannot find module 'electron' from '/Users/waley/code/PROJECT/src/connect']
  stream: 
   Labeled {
     _readableState: 
      ReadableState {
        objectMode: true,
        highWaterMark: 16,
        buffer: [],
        length: 0,
        pipes: [Object],
        pipesCount: 1,
        flowing: true,
        ended: false,
        endEmitted: false,
        reading: true,
        sync: false,
        needReadable: true,
        emittedReadable: false,
        readableListening: false,
        defaultEncoding: 'utf8',
        ranOut: false,
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null,
        resumeScheduled: false },
     readable: true,
     domain: null,
     _events: 
      { end: [Object],
        error: [Object],
        data: [Function: ondata],
        _mutate: [Object] },
     _eventsCount: 4,
     _maxListeners: undefined,
     _writableState: 
      WritableState {
        objectMode: true,
        highWaterMark: 16,
        needDrain: false,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false },
     writable: true,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }
[11:36:40] js error Cannot find module 'electron' from '/Users/waley/code/PROJECT/src/connect     

Any idea what's up? Thanks!

Answer 1

there are a few ways to resolve electron modules import regarding to API Changes Coming in Electron 1.0.

Please notice this usually occurs with bundler like webpack who override the require function.

Make use of Webpack's target property

If you are using a recent version of Webpack as a bundler, adding

target: 'electron-renderer'

to your config should let you use:

import 'electron' from electron;

Declare electron outside of your build

<!-- electron declaration -->
<script>
    const electron = require('electron');
</script>

<!-- your app build -->
<script src="dist/bundle.js"></script>

This way, I can access electron from anywhere.

Use the window.require

Electron extended the window object so that you could use:

const electron = window.require('electron');

Use the old way (still supported)

var remote = require('remote');
var app    = remote.app; // to import the app module, for example

Answer 2

Run this command:

npm install --save-dev electron

for more details click here

Answer 3

I got this error when I forgot to add "main": "./main.js", to package.json somewhere before scripts. For complete setup follow this great tutorial

Edit:

Here's a summery of that link:

Install Electron

npm install electron --save-dev

Update index.html

The generated root page in Angular points the base href to / - this will cause problems with Electron later on, so let’s update it now. Just add a period in front of the slash in src/index.html.

<base href="./">

Configure Electron

Create a new file named main.js in the root of your project (at the same level as package.json) - this is the Electron NodeJS backend. This is the entry point for Electron and defines how our desktop app will react to various events performed via the desktop operating system.

const { app, BrowserWindow } = require('electron')

let win;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 600, 
    height: 600,
    backgroundColor: '#ffffff',
    icon: `file://${__dirname}/dist/assets/logo.png`
  })


  win.loadURL(`file://${__dirname}/dist/index.html`)

  //// uncomment below to open the DevTools.
  // win.webContents.openDevTools()

  // Event when the window is closed.
  win.on('closed', function () {
    win = null
  })
}

// Create window on electron intialization
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {

  // On macOS specific close process
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // macOS specific close process
  if (win === null) {
    createWindow()
  }
})

Add main.js and custom scripts to package.json. Your package.json should look something like this:

{
  "name": "angular-electron",
  "version": "0.0.0",
  "license": "MIT",
  "main": "main.js", // <-- update here
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .", // <-- run electron 
    "electron-build": "ng build --prod && electron ." // <-- build app, then run electron 
  },
  // ...omitted
}

Run the command to build and launch electron

npm run electron-build