CODEWITHSUNDEEP
javascriptelectron
Chris
Chris

Reputation: 993

Electron failed to install correctly, please delete node_modules/ and try installing again

I am trying to use webpack + react + electron, and when I type in the CLI "electron ." it gives me this error:

I deleted node_modules and re-installed all the modules over and over like about 6 times, obviously deleting node_modules and installing isn't a solution, so I need the community's help on finding this error.

package.json

{
  "name": "ElectronULTIMA",
  "version": "1.0.0",
  "description": "electron apps",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "babel": "babel",
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "electron": "^1.6.1",
    "electron-packager": "^8.5.2",
    "electron-prebuilt": "^1.4.13",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "electron": "^1.6.1",
    "electron-prebuilt": "^1.4.13",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    "react-modal": "^1.7.1"
  }
}

main.js

const electron = require('electron');
const {app, dialog, Menu, Tray, BrowserWindow} = require('electron');
const remote = require('electron').remote;
const path = require('path');
const url = require('url');
const $ = jQuery = require('jquery');
const ipc = require('electron').ipcMain;
const fs = require('fs');
const AWS = require('aws-sdk');
const ep = new AWS.Endpoint('dynamodb.us-west-1.amazonaws.com');
const db = new AWS.DynamoDB.DocumentClient({      // Dynamo database constructor
    "apiVersion": '2012-08-10',
    "region": 'us-west-1',
    "endpoint": ep,
    "accessKeyId": '*censored*',
    "secretAccessKey": '*censored*'
});


// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
//  RENDER COMMUNICATION
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
let win; // Main project window
let rnews; // Rnews window

    win = new BrowserWindow({ width: 900, height: 700 });
    win.loadURL(`file://${__dirname}/index.html`);
    //win.openDevTools();




    // ----------------------------------------------------------------------------------- //
    // ----------------------------------------------------------------------------------- //
    // ----------------------------------------------------------------------------------- //
    // RNEWS WINDOW INSTANCE
    // ----------------------------------------------------------------------------------- //
    rnews = new BrowserWindow({ width: 620, height: 900, show: false, backgroundColor: '#2e2c29', title: '"R" News Articles' });
    // useContentSize (boolean)
    // RNEWS WINDOW VISIBILITY
    ipc.on('rnews', () => {
        rnews.loadURL(`file://${__dirname}/rnews/index.html`);
        //rnews.openDevTools();
        if (rnews.isVisible()) { rnews.hide(); }
        if (!rnews.isVisible()) { rnews.show(); }
    });



    win.on('closed', () => { win = null; });
    rnews.on('closed', () => { rnews = null; });
    rnews.on('ready-to-show', () => {
      rnews.show();
    });
}

// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
//  GLOBAL SCOPE
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
app.on('ready', MAIN_WINDOW);
// When the last window is closed
app.on('window-all-closed', () => {
    app.quit();
});
app.on ('activate', () => {
    if (win === null) {
        MAIN_WINDOW();
    }
});

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    devtool: 'inline-source-map',
    entry: [
      './index.js'
    ],
    output: { path: __dirname, filename: './bundle.js' },
    resolve: { modules: ['node_modules', 'src'], extensions: ['.js'] },
    watch: true,
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                  presets: ['es2015', 'react']
                }
            }
        ]
    },
    target: "node",
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ]
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { InputGroup, Button, ButtonToolbar, ButtonGroup, FormControl, FormGroup, render } from 'react-bootstrap';
import ReactModal from 'react-modal';
const AWS = require('aws-sdk');
const ep = new AWS.Endpoint('dynamodb.us-west-1.amazonaws.com');
const db = new AWS.DynamoDB.DocumentClient({      // Dynamo database constructor
    "apiVersion": '2012-08-10',
    "region": 'us-west-1',
    "endpoint": ep,
    "accessKeyId": '*censored*',
    "secretAccessKey": '*censored*'
});


const GRAB_RNEWS_ARTICLES = new Promise((resolve, reject) => {
  db.scan({ TableName: 'Rnews' }, (error, articles) => {
    if (error) reject (error);
    resolve(articles);
  });
});

function RenderImage(props) {
  // If thumbnailOrNo is passed as a prop give it the class "rnewsThumbnails"
  if (props.thumbnailOrNo) {
    return (
      <img src={props.imageUrl} className="img-rounded rnewsThumbnails"></img>
    )
  } else {
    return (
      <img src={props.imageUrl} className="img-rounded"></img>
    )
  }
}





RNEWS();
function RNEWS() {
  GRAB_RNEWS_ARTICLES.then(rArticles => {

    $(function() {
      // Make all links open in new tab
      $("a").attr('target', '_blank');
    });

    class RNEWS_Templating extends React.Component {
      constructor(props) {
        super(props);
        // don't forget this.props.article is passed as an individual article
      }
      render() {
        let defaultImg = 'https://lh3.googleusercontent.com/-Lk5XNJRyFKw/AAAAAAAAAAI/AAAAAAAAAA0/xkk9_owpEhE/photo.jpg';
        return (
          <div className="panel panel-warning">
            <div className="panel-body">
              <div className="col-sm-2">
                <strong className="articlesource">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this.props.article.source}</strong>
                <br />
                <RenderImage imageUrl={this.props.article.imgUrl || defaultImg } thumbnailOrNo="yes" />
              </div>
              <div className="col-sm-10">
                  <strong>Short title: </strong><span className="rnewsshorttitle"><font size="4">{this.props.article.title}</font></span>
                  <br />
                  <span className="rnewsdescription">{this.props.article.description}</span>
                  <br />
                <a href={this.props.article.url}>{this.props.article.url}</a>
              </div>
            </div>
          </div>
        );
      }
    }

    // ----------------------------------------------------------------------------------- //
    // RNEWS_Parent will hold the states
    // ----------------------------------------------------------------------------------- //
    class RNEWS_Parent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          articles: this.props.rArticles.Items,
          searchVal: "",
          titles: []
        }
        this.searchValueUpdater = this.searchValueUpdater.bind(this);
      }
      searchValueUpdater(e) {
        this.setState({ searchVal: e.target.value })
      }
      componentWillMount() {
        this.state.articles.map(article => {
          return this.state.titles.push(article.title);
        })
      }
      render() {
        // Will be used to show only 10 articles
        let TwentyArticles = 0;
        return (
          <div className="container">
            <div className="well row">
              <center>
                <font size="5">"R" News Articles (ascending order)</font>
              </center>
              <div>
                <h6>Total articles: <span className="goldenvalue">{this.props.rArticles.Count}</span></h6>
                <h6>Total scanned articles: <span className="goldenvalue">{this.props.rArticles.ScannedCount}</span></h6>
              </div>
              <FormGroup bsSize="sm" controlId="rnewsSearch" validationState="success">
                <FormControl
                  placeholder="Search for an article"
                  inputRef={(input) => { this.input = input; }}
                  onChange={this.searchValueUpdater}
                  >
                </FormControl>
              </FormGroup>
              <span>{this.state.searchVal}</span>
              <div>
                <h3><font color="magenta">&nbsp;&nbsp;&nbsp;&nbsp;Articles: </font></h3>
                <br /><br />
                <div className="col-sm-8">
                    {this.state.articles.map((articleObj, key) => {
                      TwentyArticles++;
                      if (TwentyArticles > 20) { return; }
                      return <RNEWS_Templating article={articleObj} />
                    })}
                </div>
              </div>
            </div>
          </div>
        );
      }
    }


    ReactDOM.render(<RNEWS_Parent rArticles={rArticles}/>, document.getElementById("ace"));
  });
}

Upvotes: 23

Views: 32281

Answers (13)

dalvi
dalvi

Reputation: 57

I tried to use bunch of answers, neither but only one worked which was provided by @www as comment to question:

In webpack configuration set:
target: "electron"

Note: in current webpack version there are multiple targets for electron (electron-main, electron-preload, electron-renderer), choose one of those for corresponding parts of application

Upvotes: 0

jlang
jlang

Reputation: 1057

In my case I tried to bundle my main.js but including electron. The solution was to mark "electron" as external module (not including it into the build output), and then everything worked again.

Upvotes: 8

Troncoso
Troncoso

Reputation: 2463

This happened to me for a different reason than anyone has mentioned here. I'll leave this answer just in case anyone is in this situation.

I was switching an electron app to use contextIsolation for better security. So I created a preload.js and used electron.contextBridge.exposeInMainWorld. However, after doing this, I kept getting the error mentioned in this question. As it turns out, I just forgot to update my BrowserWindow settings:

let mainWindow = new BrowserWindow({
        height: 800,
        width: 672,
        resizable: false,
        show: false,
        frame: true,
        webPreferences: {
            preload: join(__dirname, 'preload.js'),
            contextIsolation: false, // <----- SHOULD BE TRUE
            nodeIntegration: true // <------ SHOULD BE FALSE
        },
    })

Posting this because this is the first result in google for this error and there is no indication as to what's causing it. Hopefully it helps someone.

Upvotes: 0

Kaspi
Kaspi

Reputation: 3678

I had to go to node_modules/electron and run node install.js manually.

Upvotes: 27

Ohad Levi
Ohad Levi

Reputation: 53

Solved this exact issue by understanding that I had both local and global installation of electron with different versions, npm install -g electron@wantedVersion fixed the issue, I guess uninstalling the global one would have solved it as well

Upvotes: 1

Krishna Jangid
Krishna Jangid

Reputation: 5410

In my case after run this cmd sudo npm install

please wait for some time to install electron

will show something like following this in my case after hit sudo npm install

> node install.js

Downloading electron-v8.5.5-linux-x64.zip: [==========---------------------------------------------------------------] 14% ETA: 445.2 seconds 
Downloading electron-v8.5.5-linux-x64.zip: [==========---------------------------------------------------------------] 14% ETA: 461.5 seconds 
Downloading electron-v8.5.5-linux-x64.zip: [===========--------------------------------------------------------------] 15% ETA: 426.5 seconds 
Downloading electron-v8.5.5-linux-x64.zip: [===========--------------------------------------------------------------] 15% ETA: 427.6 seconds 
Downloading electron-v8.5.5-linux-x64.zip: [===========--------------------------------------------------------------] 15% ETA: 428.6 seconds 
Downloading electron-v8.5.5-linux-x64.zip: [===========--------------------------------------------------------------] 15% ETA: 429.8 seconds 
Downloading electron-v8.5.5-linux-x64.zip: [===========--------------------------------------------------------------] 15% ETA: 430.5 seconds 
Downloading electron-v8.5.5-linux-x64.zip: [===========--------------------------------------------------------------] 15% ETA: 431.9 seconds 
Downloading electron-v8.5.5-linux-x64.zip: [===========--------------------------------------------------------------] 15% ETA: 432.5 seconds 
Downloading electron-v8.5.5-linux-x64.zip: [===========--------------------------------------------------------------] 15% ETA: 433.8 seconds

Then Run npm run electron

May be will work Thanks

Upvotes: 0

Linas
Linas

Reputation: 782

This is voodoo, but it worked for me:

rm -r node_modules/electron
npm install
npm start      # Oh no! Still broken!

rm package-lock.json
npm install
npm start      # Darn it! Same error as ever!

rm -r node_modules/electron  # One more time, for good luck
npm install
npm start        # Yayy! It worked!

So I guess that (for me) both electron, and package-lock.json had to be removed.

Upvotes: 4

Zakthedev
Zakthedev

Reputation: 417

This usually happens due to bad network so the dependencies aren't downloaded and installed correctly.

Make sure to delete node_modules folder and run yarn cache clean or npm cache verify to make sure the cache is healed from corruption issues.

Now install your dependencies again npm install or yarn and everything should work properly.

Upvotes: 6

user1767316
user1767316

Reputation: 3631

The question was also asked here and here.

But the explanation and a workaround was described here:

Download of the electron package by install.js fails silently, one should download manualy the zip of the package.

I wasn't successful using browsers, but it worked using curl :

curl 7.55.1 (Windows) libcurl/7.55.1 WinSSL curl 7.55.1 (Windows) libcurl/7.55.1 WinSSL Release-Date: [unreleased] Protocols: dict file ftp ftps http https imap imaps pop3 pop3s smtp smtps telnet tftp Features: AsynchDNS IPv6 Largefile SSPI Kerberos SPNEGO NTLM SSL

and the following command:

curl -L -O https://github.com/electron/electron/releases/download/v7.1.9/electron-v7.1.9-win32-x64.zip
  • Download the zip archive in your project,
  • Then edit the installation script under .\node_modules\electron\install.js for it to use the archive instead of any download attempt:

Replace the downloadArtifact bloc: 

// downloads if not cached
//downloadArtifact({
// ...
//})

.. by this unziping command:

extractFile('./electron-v7.1.9-win32-x64.zip');

Upvotes: 0

DonavanMartin
DonavanMartin

Reputation: 41

Solved on raspberry Pi4 with:

npm i -D electron --arch=armv7l

Upvotes: 2

injamul
injamul

Reputation: 43

Go to the directory node_modules/ and delete electron directory.

After that run npm install electron --save-dev. it will solve ur problem.

Upvotes: 1

Shoaib Ahmed
Shoaib Ahmed

Reputation: 775

See in the message that it is saying that there is a directory where the global npm package is installed. In your case it is inside: node_modules/

So go to that directory and delete all the directory named prefixing electron.

Now run npm install -g react-devtools

After that you are ready to roll.

To start the dev tools, write the following command.

react-devtools

Upvotes: -2

spring
spring

Reputation: 18487

I don't know if this is the issue but you are including Electron twice:

  "electron": "^1.6.1",
  "electron-prebuilt": "^1.4.13",

Installation
Note As of version 1.3.1, this package is published to npm under two names: electron and electron-prebuilt. You can currently use either name, but electron is recommended, as the electron-prebuilt name is deprecated, and will only be published until the end of 2016.

Upvotes: 1

Related Questions