Fresh project `yarn dev` gives error in browser, electron does not start

[mindfullsilence]

Steps to reproduce:
npm init electron-vue-next my-project
cd my-project
yarn install
yarn dev

Server starts correctly, but opening the page in the browser shows a blank white screen. The following appears in the console:

Uncaught TypeError: Cannot destructure property 'shell' of 'window.electron' as it is undefined.
    at electron.ts:3

Following is shown in terminal:

vite v2.1.5 dev server running at:

  > Local:    http://localhost:8080/
  > Network:  http://192.168.1.171:8080/
  > Network:  http://192.168.2.1:8080/
/Users/timothyanderson/Documents/Projects/my-project/extensions
[DEV] Bundle /Users/timothyanderson/Documents/Projects/my-project/dist 5140ms
[DEV] Electron app started
[DEV] Skip start/reload preload.

Electron never opens.

[ci010]

Can you provide more detail info, like your OS version, node & yarn version?

I tried on my laptop with node v15.4.0, yarn 1.22.10, vite 2.1.5 running on Windows 10 20H2, and it works fine for me.

What I did:

npm init electron-vue-next my-project
cd my-project
npx yarn install
npx yarn dev

[mindfullsilence]

node v15.12.0
npm 7.6.3
yarn 1.22.10
vite v2.1.5
macOS Catalina 10.15.5

Haven't used npx. Is it required for this project?

Here's the options I used:

? Name of the project: drip-mini-app
? Enable node integration for renderer: Yes
? Use Service infrastructure to handle main/renderer communication: Yes
? Include thread_worker example Yes
? Generate vscode debug config: No

[mindfullsilence]

I added the following to package.json:

{
    "main": "scripts/dev.js"
}

Then ran the following from terminal:

electron .

This provided the following output:

  vite v2.1.5 dev server running at:

  > Local:    http://localhost:8080/
  > Network:  http://192.168.1.171:8080/
  > Network:  http://192.168.2.1:8080/
  > Network:  http://192.168.10.1:8080/
/Users/timothyanderson/Documents/Projects/drip-mini-app/extensions
[DEV] Bundle /Users/timothyanderson/Documents/Projects/drip-mini-app/dist 3645ms
[DEV] Electron app started
(node:26567) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "file" argum
ent must be of type string. Received an instance of Object
    at validateString (internal/validators.js:124:11)
    at normalizeSpawnArguments (child_process.js:420:3)
    at spawn (child_process.js:560:13)
    at startElectron (/Users/timothyanderson/Documents/Projects/drip-mini-app/scripts/dev.js:43:2
4)
    at reloadElectron (/Users/timothyanderson/Documents/Projects/drip-mini-app/scripts/dev.js:100
:3)
    at WatchEmitter.<anonymous> (/Users/timothyanderson/Documents/Projects/drip-mini-app/scripts/
dev.js:177:13)
    at WatchEmitter.emit (events.js:315:20)
    at Watcher.run (/Users/timothyanderson/Documents/Projects/drip-mini-app/node_modules/rollup/d
ist/shared/watch.js:686:22)
(Use `Electron --trace-warnings ...` to show where the warning was created)
(node:26567) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated
 either by throwing inside of an async function without a catch block, or by rejecting a promise 
which was not handled with .catch(). To terminate the node process on unhandled promise rejection
, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhan
dled_rejections_mode). (rejection id: 1)
(node:26567) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the fu
ture, promise rejections that are not handled will terminate the Node.js process with a non-zero 
exit code.

Changing line 43 of dev.js to the following:

  const spawnProcess = spawn(
    'electron',
    ['--inspect=5858', '--remote-debugging-port=9222', '--trace-warnings', join(__dirname, '../dist/index.js')]
  )

Allows electron to start and open the window. From here, just about everything looks good, but the following is output in terminal:

[CONSOLE] Debugger listening on ws://127.0.0.1:5858/04a2bf0c-6a65-4f8b-9a26-05f6eef39fad
[CONSOLE] For help, see: https://nodejs.org/en/docs/inspector
[DEV] Dev socket connected
[CONSOLE] DevTools listening on ws://127.0.0.1:9222/devtools/browser/5159e7e8-2cfe-42ed-bf23-f3f5
0c3263db
[CONSOLE] (node:26888) ExtensionLoadWarning: Warnings loading extension at /Users/timothyanderson
/Documents/Projects/drip-mini-app/extensions:
[CONSOLE]   Unrecognized manifest key 'browser_action'.
[CONSOLE]   Permission 'contextMenus' is unknown or URL pattern is malformed.
[CONSOLE] (Use `Electron --trace-warnings ...` to show where the warning was created)
[CONSOLE] (node:26888) ExtensionLoadWarning: Warnings loading extension at /Users/timothyanderson
/Documents/Projects/drip-mini-app/extensions:
[CONSOLE]   Unrecognized manifest key 'browser_action'.
[CONSOLE]   Permission 'contextMenus' is unknown or URL pattern is malformed.

After updating the above line and running from the npm script:

yarn dev

I get the following error and the vite server is killed before electron opens:

[CONSOLE] /Users/timothyanderson/Documents/Projects/drip-mini-app/node_modules/electron/dist/Elec
tron.app/Contents/MacOS/Electron exited with signal SIGTRAP

[ci010]

I tried on my mac (Catalina 10.15.4) with npm 7.5.3, node 15.9.0, yarn 1.22.10, and I cannot repro the situation...

Can you try to recreate the project, ensuring the version is 0.0.13?

From your original issue, one possible case is the preload script is not correctly loaded.

Basically, you can change the src/renderer/hooks/electron.ts content, and remove the line

const { shell, clipboard, ipcRenderer, dialog } = (window as any).electron as typeof Electron

as workaround. (You need to change other file to make it at least pass the compile also)

Removing that, you won't be able to access the electron module from renderer side...

You can also try to create the BrowserWindow with such config:

  const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: indexPreload,
      contextIsolation: false, // make this false
      nodeIntegration: true, // make this true
    },
    icon: logoUrl
  })

which give less strict env for browser. Hope this can help.

[Maus3rSR]

Hello,

I don't unserstand why, but I got also an issue when using electron-vue-next with yarn dev at startup

This is the reproduction step on the followed environnement :

• Windows 10
• yarn berry (v2)
• node 14.17.5

> npm init electron-vue-next
? Name of the project: ElectronVueNext        
? Enable node integration for renderer: Yes
? Use Service infrastructure to handle main/renderer communication: Yes
? Include thread_worker example No    
? Generate vscode debug config: Yes

> yarn set version berry
Resolving berry to a url...
Downloading https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js...
Saving it into E:\Developpement\Web\Sandbox\ElectronVueNext\.yarn\releases\yarn-berry.cjs...
Updating E:\Developpement\Web\Sandbox\ElectronVueNext/.yarnrc.yml...
Done!

> yarn install

> yarn dev

Everything works fine, but after I close the two windows, I try to relaunch and then :

> yarn dev
TypeError: Cannot destructure property 'withFileTypes' of '(intermediate value)(intermediate value)(intermediate value)' as it is null.
    at URLFS.readdirPromise (ElectronVueNext\.pnp.cjs:12609:5)
    at ElectronVueNext\.pnp.cjs:15805:20
    at processTicksAndRejections (internal/process/task_queues.js:77:11)

Impossible to re-run the project again... An issue with the node version? Yarn berry?

Thank you for this awesome project. I wanted to upgrade my knowledge with a big project I want to rework from electron-webpack to your project.

[ci010]

Hello,

I don't unserstand why, but I got also an issue when using electron-vue-next with yarn dev at startup

This is the reproduction step on the followed environnement :

• Windows 10
• yarn berry (v2)
• node 14.17.5

> npm init electron-vue-next
? Name of the project: ElectronVueNext        
? Enable node integration for renderer: Yes
? Use Service infrastructure to handle main/renderer communication: Yes
? Include thread_worker example No    
? Generate vscode debug config: Yes

> yarn set version berry
Resolving berry to a url...
Downloading https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js...
Saving it into E:\Developpement\Web\Sandbox\ElectronVueNext\.yarn\releases\yarn-berry.cjs...
Updating E:\Developpement\Web\Sandbox\ElectronVueNext/.yarnrc.yml...
Done!

> yarn install

> yarn dev

Everything works fine, but after I close the two windows, I try to relaunch and then :

> yarn dev
TypeError: Cannot destructure property 'withFileTypes' of '(intermediate value)(intermediate value)(intermediate value)' as it is null.
    at URLFS.readdirPromise (ElectronVueNext\.pnp.cjs:12609:5)
    at ElectronVueNext\.pnp.cjs:15805:20
    at processTicksAndRejections (internal/process/task_queues.js:77:11)

Impossible to re-run the project again... An issue with the node version? Yarn berry?

Thank you for this awesome project. I wanted to upgrade my knowledge with a big project I want to rework from electron-webpack to your project.

It looks like something is .pnp.cjs failed... I'm not familiar with yarn. I'll try it if I have time, but I think in your case, using npm run dev it should not through.