Electron 无法正确安装，请删除 node_modules/ 并尝试重新安装

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

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 2

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 3

Go to the directory node_modules/ and delete electron directory.

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

Answer 4

在 raspberry Pi4 上解决了：

npm i -D electron --arch=armv7l

Answer 5

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.

Answer 6

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 7

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

Answer 8

通过了解我在本地和全局安装不同版本的电子来解决这个确切的问题，npm install -g electron@wantedVersion 解决了这个问题，我想卸载全局的也可以解决它

Answer 9

我不得不去node_modules/electron并手动运行node install.js 。

Answer 10

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.

Answer 11

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.

Answer 12

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