This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

problems

This is a problem that has cropped up. Error when installing electron using YARN add –dev electron:

HTTPError: the Response code 404 (Not Found) for npm.taobao.org/mirrors/ele…

Check out Github and see that electron updated the official version of the V16 version 5 hours ago. Also included is update V15.3.2 for v15

This problem occurs because the requested download path (404) does not exist when downloading electron. Namely the installation package http://npm.taobao.org/mirrors/electron/v16.0.0/electron-v16.0.0-win32-x64.zip does not exist. Directly accessible npm.taobao.org/mirrors/ele… Check whether the corresponding URL path exists:

The complete error information during installation is as follows:

$YARN add --dev electron yarn add v1.22.17 info No lockfile found. [1/4] considerations packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... error D:\SoftWareDevelope\Work\AutoC\node_modules\electron: Command failed.Exit code: 1 Command: node install.js Arguments: Directory: D:\SoftWareDevelope\Work\AutoC\node_modules\electron Output: HTTPError: Response code 404 (Not Found)forhttp://npm.taobao.org/mirrors/electron/v16.0.0/electron-v16.0.0-win32-x64.zip at EventEmitter. "anonymous > (D:\SoftWareDevelope\Work\AutoC\node_modules\got\source\as-stream.js:35:24)
    at EventEmitter.emit (events.js:376:20)
    at module.exports (D:\SoftWareDevelope\Work\AutoC\node_modules\got\source\get-response.js:22:10)
    at ClientRequest.handleResponse (D:\SoftWareDevelope\Work\AutoC\node_modules\got\source\request-as-event-emitter.js:155:5) at Object.onceWrapper (events.js:483:26) at ClientRequest.emit (events.js:388:22) at  ClientRequest.origin.emit (D:\SoftWareDevelope\Work\AutoC\node_modules\@szmarczak\http-timer\source\index.js:37:11)
    at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:647:27)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:126:17)
    at Socket.socketOnData (_http_client.js:515:22)
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Copy the code

The cause and solution of the problem

This problem arises for two reasons:

Taobao mirror is not synchronized with the latest version

  • First, the newly updated electron version has not been synchronized in Taobao image, that is, there is no version 16 electron in Taobao image.

In NPM’s official mirror address npmmirror.com/, you can see the introduction of the method of using CNPM sync to synchronize a module. Try to sync electron with it. It doesn’t work

cnpm sync electron
Copy the code

It is also possible to synchronize only a small module in the NPM, and install the electron using a separate electron image address: npm.taobao.org/mirrors. The exact reason is unknown, but the result is that the latest electron is not synchronized in npm.taobao.org/mirrors.

If there is no synchronization, then only the specified version that exists in the Taobao image can be installed.

The url path of electron in Taobao mirror does not have version identifier ‘V’.

  • Second, there is no V character in the version identifier of the electron path in Taobao mirror.

Here’s the comparison:

Electron installation request address is: npm.taobao.org/mirrors/ele… Electron taobao mirror address is: npm.taobao.org/mirrors/ele…

This section uses V15.3.1 as an example, because its version currently exists in the Taobao mirror path.

That is, in the URL path of Taobao mirror, there is no V to identify the version, and there is no character V before the version number.

The solution to this problem is to modify the NPM variable that constitutes the electron download address. The URL used by @electron/get(under node_modules of the current project) consists of the following:

url = ELECTRON_MIRROR + ELECTRON_CUSTOM_DIR + '/' + ELECTRON_CUSTOM_FILENAME
Copy the code

The default value of ELECTRON_CUSTOM_DIR is V $VERSION. You can use the {{VERSION}} placeholder to change the default format. If v{{VERSION}} equals the default value, change it to {{VERSION}}.

Directly in the shell command line, modify the NPM configuration variable ELECTRON_CUSTOM_DIR to achieve the correct version path:

Run the NPM config set command on the CLI to change the version to the correct one.

npm config set ELECTRON_CUSTOM_DIR "{{ version }}"
Copy the code

The following is the modified operation

$ npm config set ELECTRON_CUSTOM_DIR "{{ version }}"$YARN add --dev electron yarn add v1.22.17 info No lockfile found. [1/4] considerations packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... error D:\SoftWareDevelope\Work\Auto\node_modules\electron: Command failed. Exit code: 1 Command: node install.js Arguments: Directory: D:\SoftWareDevelope\Work\Auto\node_modules\electron Output: HTTPError: Response code 404 (Not Found)forhttp://npm.taobao.org/mirrors/electron/16.0.0/electron-v16.0.0-win32-x64.zip...Copy the code

As you can see, the path in the request address has been changed to electron/16.0.0/, but an error will still be reported due to the cause of not synchronizing.

Modify the ELECTRON_MIRROR in the ELECTRON download request URL

You can also modify the ELECTRON_MIRROR in the ELECTRON download request URL. For example, the default address used above is non-CDN Taobao mirror. You can also set the CDN address for Taobao image as required:

npm config set ELECTRON_MIRROR "https://cdn.npm.taobao.org/dist/electron/"
Copy the code

Non CDN Taobao mirror

npm config set ELECTRON_MIRROR "https://npm.taobao.org/mirrors/electron/"
Copy the code

ELECTRON_CUSTOM_DIR and ELECTRON_MIRROR are environment variables themselves.

Final solution: Modify the URL path of the ELECTRON_CUSTOM_DIR request and specify that the Taobao image exists in the electron version

The following is the correct installation procedure for modifying the URL path of the ELECTRON_CUSTOM_DIR request and specifying the electron version of the Taobao image that exists:

$ npm config set ELECTRON_CUSTOM_DIR "{{ version }}"$yarn add --dev [email protected] yarn add v1.22.17 info No lockfile found. [1/4] considerations packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... info There appears to be trouble with your network connection. Retrying... Success Saved lockfile. Success Saved 78 new dependencies. Info Direct dependencies ├ ─ [email protected] info All Dependencies ├ ─ @ electron/[email protected]... ├─ [email protected] ├─ [email protected] Donein26.07 s.Copy the code

Add: modify@electron/getAddress of the configuration file

The problem with the version identifier character V in the URL path can also be solved by directly modifying the variable in @electron/get

Find const path = mirrorVar(‘customDir’, opts, details.version).replace(‘{{version}}’, details.version.replace(/^v/, “)); This line (line 46 in current version)

Change it to const path = mirrorVar(‘customDir’, opts, details.version.replace(/^v/, ”)).replace(‘{{version}}’, details.version.replace(/^v/, ”)); .

Details.version.replace (/^v/, ”)

reference

  • Electron-Advanced Installation Instructions#mirror
  • Resolve the electron installation card problem in node install.js and Response 404(Not Found)
  • Electron cannot be downloaded from Taobao Mirror