Electron failed to install correctly, please delet

Question

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"));
  });
}

Answer 1

Go to the directory node_modules/ and delete electron directory.

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

Answer 2

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.

Answer 3

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');

Answer 4

Solved on raspberry Pi4 with:

npm i -D electron --arch=armv7l

Answer 5

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.

Answer 6

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