跳到主要内容
版本：0.17.0+

electron-bugfix

  1. ✅ when mock/test, 'Electron failed to install correctly, please delete node_modules/electron and try installing again'
    1. conclusion
  2. electron-rebuild error
  3. ✅ can't resolve rebuild in postinstall
  4. ✅ webpack dev server
  5. ✅ registry diff caused build error
  6. ✅ native module
    1. electron build sqlite3
    2. electron-builder install-app-deps error
  7. ✅ windows cannot select file
  8. ✅ Can't use ContextBridge which ContextIsolation is true
    1. Official Documentation
    2. A simple solution: give up using ContextBridge
    3. A seemly good solution: nodeIntegration: true; contextIsolation:false
    4. A more sophisticated solution: based on WebPack
      1. add global = globalThis in index.html

✅ when mock/test, 'Electron failed to install correctly, please delete node_modules/electron and try installing again'​

picture 28

I didn't find any path.txt for electron, even for any package. picture 29

However, if I explore global electron, then it has (ref: Browse an installed package):

picture 30

As a contrast:

picture 31

What's interested, if I use node install.js as suggested by node.js - Electron and Webpack ENOENT: no such file or directory, open '/path.txt' - Stack Overflow:

picture 32

Then things are all ok! picture 33

conclusion​

If we want to use electron for project mock, we may activate it using:

cd node_modules/electron
node install.js

Or, according to the source code, we can provide an environment variable:

ELECTRON_OVERRIDE_DIST_PATH=XXXX

electron-rebuild error​

one possible problem is about registry.

picture 21

✅ can't resolve rebuild in postinstall​

picture 20

In this article ERROR in dll renderer Module not found: Error: Can't resolve 'undefined' · Issue #43 · rvpanoz/luna, which occurs the problem a bit like me, and its solution is to remove the cannot-resolve package of undefined.

So I learned it, and do find a package named as rebuild in my package.json file.

picture 18

Then I removed it, and re npm run postinstall, and it succeeded!

picture 19

✅ webpack dev server​

picture 16

solution:

  1. add // @ts-ignore, official way
picture 17
  1. add an extended interface, at: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/27570#issuecomment-474628163

ref:

✅ registry diff caused build error​

picture 14

✅ native module​

The proper way to deal with native module is to:

  1. install it into devDependencies in the project root
  2. install it as a dependency in the release/app

ref:

electron build sqlite3​

electron-rebuild -f -w sqlite3

'-f' means 'force' '-w' means 'module'

picture 22

ref:

electron-builder install-app-deps error​

can change the electron-builder into electron-rebuild.

picture 15

core ref:

✅ windows cannot select file​

This is a feature/restriction in windows platform.

The solution is to use one of openFIle and openFolder.

picture 6

ref:

✅ Can't use ContextBridge which ContextIsolation is true​

Official Documentation​

A simple solution: give up using ContextBridge​

In this article, the one who happened to the same issue finally uses only ipcMain and ipcRenderer with no ContextBridge set.

Although it's OK, since the ipcMain - ipcRenderer solution can do almost anything rather than base on a ContextBridge.

A seemly good solution: nodeIntegration: true; contextIsolation:false​

A more sophisticated solution: based on WebPack​

add global = globalThis in index.html​