Electron 無法正確安裝，請刪除 node_modules/ 並嘗試重新安裝

Question

我正在嘗試使用 webpack + react + electron，當我在 CLI 中輸入“electron”時。 它給了我這個錯誤：

我刪除了 node_modules 並一遍又一遍地重新安裝了所有模塊大約 6 次，顯然刪除 node_modules 並安裝不是解決方案，所以我需要社區的幫助來發現這個錯誤。

包.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

這通常是由於網絡不好而發生的，因此依賴項沒有正確下載和安裝。

確保刪除node_modules文件夾並運行yarn cache clean或npm cache verify以確保緩存從損壞問題中得到node_modules 。

現在再次安裝您的依賴項npm install或yarn ，一切都應該正常工作。

Answer 2

我不知道這是否是問題，但您將Electron包含了兩次：

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

安裝
注意 從 1.3.1 版本開始，這個包以兩個名稱發布到 npm：electron 和 electron-prebuilt。 您目前可以使用任一名稱，但建議使用電子，因為電子預建名稱已被棄用，並且只會在 2016 年底之前發布。

Answer 3

轉到目錄 node_modules/ 並刪除電子目錄。

之后運行npm install electron --save-dev 。 它會解決你的問題。

Answer 4

在 raspberry Pi4 上解決了：

npm i -D electron --arch=armv7l

Answer 5

這是伏都教，但它對我有用：

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!

所以我想（對我來說）電子和package-lock.json都必須被刪除。

Answer 6

這里和這里也有人問過這個問題。

但是這里描述了解釋和解決方法：

通過 install.js 下載電子包無提示失敗，應手動下載包的 zip。

我沒有成功使用瀏覽器，但它使用 curl 工作：

curl 7.55.1 (Windows) libcurl/7.55.1 WinSSL curl 7.55.1 (Windows) libcurl/7.55.1 WinSSL 發布日期：[未發布] 協議：dict 文件 ftp ftps http https imap imaps pop3 pop3s smtp smtps telnet tftp 功能：AsynchDNS IPv6 大文件 SSPI Kerberos SPNEGO NTLM SSL

和以下命令：

curl -L -O https://github.com/electron/electron/releases/download/v7.1.9/electron-v7.1.9-win32-x64.zip

• 下載項目中的 zip 存檔，
• 然后編輯 .\\node_modules\\electron\\install.js 下的安裝腳本，使其使用存檔而不是任何下載嘗試：

替換 downloadArtifact 塊：

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

..通過這個解壓命令：

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

Answer 7

在我的情況下，運行這個 cmd sudo npm install

請稍等一段時間安裝electron

在點擊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 

然后運行npm run electron

可能會工作謝謝

Answer 8

通過了解我在本地和全局安裝不同版本的電子來解決這個確切的問題，npm install -g electron@wantedVersion 解決了這個問題，我想卸載全局的也可以解決它

Answer 9

我不得不去node_modules/electron並手動運行node install.js 。

Answer 10

這發生在我身上的原因與這里提到的任何人都不同。 我會留下這個答案，以防萬一有人遇到這種情況。

我正在切換一個電子應用程序以使用contextIsolation以獲得更好的安全性。 所以我創建了一個preload.js並使用了electron.contextBridge.exposeInMainWorld 。 但是，在這樣做之后，我不斷收到此問題中提到的錯誤。 事實證明，我只是忘記更新我的BrowserWindow設置：

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
        },
    })

發布此消息是因為這是 google 中針對此錯誤的第一個結果，並且沒有說明是什么原因導致的。 希望它可以幫助某人。

Answer 11

就我而言，我嘗試捆綁我的main.js但包括電子。 解決方案是將“電子”標記為外部模塊（不包括在構建輸出中），然后一切都恢復正常。

Answer 12

在消息中看到是說有一個安裝全局npm包的目錄。 在你的情況下，它在里面： node_modules/

因此，轉到該目錄並刪除所有名為電子前綴的目錄。

現在運行npm install -g react-devtools

之后，您就可以開始滾動了。

要啟動開發工具，請編寫以下命令。

反應開發工具