Doing import { ipcRenderer} from 'electron' (or any other renderer electron module) crashes the app with reason: "crashed" and exitCode: 11.

Details

• I'm trying to migrate from Webpack and the same code works there.
• nodeIntegrationInWorker is set to true.
• Exit code 11 usually means Segmentation fault.
• One thing that is being logged in the Terminal when the app crashes:

  [20890:0831/172750.464535:ERROR:shared_image_manager.cc(267)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
  [20890:0831/172750.464559:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.
  [20890:0831/172750.464564:ERROR:shared_image_manager.cc(267)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
  [20890:0831/172750.464569:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.
  [20890:0831/172750.464572:ERROR:shared_image_manager.cc(267)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
  [20890:0831/172750.464578:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.
  [20890:0831/172750.464580:ERROR:shared_image_manager.cc(267)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
  [20890:0831/172750.464584:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.
  [20890:0831/172750.464601:ERROR:shared_image_manager.cc(267)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
  [20890:0831/172750.464606:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.
  [20890:0831/172750.464609:ERROR:shared_image_manager.cc(267)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
  [20890:0831/172750.464612:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.
  

• Another thing:

  Error sending from webFrameMain:  Error: Render frame was disposed before WebFrameMain could be accessed
      at n._sendInternal (node:electron/js2c/browser_init:165:629)
      at b._sendInternal (node:electron/js2c/browser_init:161:2573)
      at node:electron/js2c/browser_init:193:729
      at new Promise (<anonymous>)
      at Object.invokeInWebContents (node:electron/js2c/browser_init:193:477)
      at b.executeJavaScript (node:electron/js2c/browser_init:161:3267)
      at process.processTicksAndRejections (node:internal/process/task_queues:96:5)
  

I am trying to use this plugin with nuxt 3 but can't make it work so far. I have the following nuxt.config.ts

import { rmSync } from "fs";
import electron from "vite-electron-plugin";
import renderer from "vite-plugin-electron-renderer";

rmSync("dist-electron", { recursive: true, force: true });

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: false,
  vite: {
    plugins: [
      electron({
        include: ["electron"],
      }),
      // Use Node.js API in the Renderer-process
      renderer({
        nodeIntegration: true,
      }),
    ],
  },
});

and my folder structure is as advised:

.
├── README.md
├── app.vue
├── dist
├── electron
│   ├── electron-env.d.ts
│   ├── main.ts
│   └── preload.ts
├── nuxt.config.ts
├── package.json
├── public
│   └── favicon.ico
├── tsconfig.json
└── yarn.lock

I am getting the following error:

 ERROR  Cannot start nuxt:  Cannot read property 'on' of null                                                  04:25:23

  at configureServer (node_modules/vite-electron-plugin/index.mjs:332:25)
  at Module.createServer (node_modules/vite/dist/node/chunks/dep-4da11a5e.js:62251:30)
  at async buildClient (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.8e427c63.mjs:297:24)
  at async bundle (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.8e427c63.mjs:853:3)
  at async build (node_modules/nuxt/dist/index.mjs:2084:5)
  at async Promise.all (index 1)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6785:9)
  at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6828:5)
  at async _main (node_modules/nuxi/dist/cli.mjs:50:20)

The on refers to the httpServer at this line of code here

Not sure how to solve this issue

ThreeJS is used in the project, and the interface cannot be displayed after packaging.

lingo3D is a 3D development framework based on ThreeJS package

project address: https://github.com/robomentor/Electron_Threejs_Template

The development environment can be used normally, but the interface cannot be displayed after packaging, and there is no related error message.

How to use:

yarn && yarn electron:rebuild

development mode：yarn electron:dev

release mode：yarn electron:build && yarn electron:win64 or release mode：yarn electron:build && yarn electron:win32 or release mode：yarn electron:build && yarn electron:mac

npm WARN Could not resolve dependency:
npm WARN peer vite@">=3.2.0" from [email protected]

I am having another issue (require is not define in browser) and trying to update this plugin to latest version. However, there is a problem found with peer dependency, as attached above. I have checked, vite only has 3.1.7 as latest version. 3.2.0-beta.0 is available but is there a problem for npm to read that beta portion?

When vite.config.js is modified, vite spawn a new instance instead of closing the previous one.

export default defineConfig({
    base: './',
    plugins: [
        jsx({}),
        vue({}),
        electron({
            main: {
                entry: 'src/main.ts',
            },
        }),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    build: {
        minify: process.env.NODE_ENV === 'production',
    }
})

Note: I used this in my electron project without using Boilerplate with the configuration as in the snippet.

After I've upgraded vite to 3.2 from 3.1 I and vite-plugin-electron to 0.10.2, I started getting an error: 'Could not resolve entry module (index.html)":

vite v3.2.0 building for production...
✓ 0 modules transformed.
Could not resolve entry module (index.html).
error during build:
Error: Could not resolve entry module (index.html).
    at error (file:///Users/user/work/workbench-vite-bug/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
    at ModuleLoader.loadEntryModule (file:///Users/user/work/workbench-vite-bug/node_modules/rollup/dist/es/shared/rollup.js:22175:20)
    at async Promise.all (index 0)

If I remove electron plugin from vite.config.ts the error goes away (at first I thought it's coming from [email protected] but it doesn't look so). If I install 0.9.3 version the error goes away as well.

vite.config.ts:

import {fileURLToPath, URL} from 'node:url';
import {rmSync} from 'fs';
import path from 'path';
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import pkg from './package.json';
import electron, {onstart} from 'vite-plugin-electron';

// https://vitejs.dev/config/
export default defineConfig({
  root: 'src',
  base: path.resolve(__dirname, "./dist/"),
  plugins: [
    vue(),
    electron({
      main: {
        entry: 'src/electron/main/index.ts',
        vite: {
          build: {
            sourcemap: true,
            outDir: 'dist/electron/main',
          },
          plugins: [process.env.VSCODE_DEBUG ? onstart() : null],
        },
      },
      preload: {
        input: {
          index: path.join(__dirname, 'src/electron/preload/index.ts'),
        },
        vite: {
          build: {
            sourcemap: 'inline',
            outDir: 'dist/electron/preload',
          },
        },
      },
    }),
  ],
  server: process.env.VSCODE_DEBUG
    ? {
        host: pkg.debug.env.VITE_DEV_SERVER_HOSTNAME,
        port: pkg.debug.env.VITE_DEV_SERVER_PORT,
      }
    : undefined,
  build: {
    rollupOptions: {
      input: {
        app: './src/index.html',
      },
    },
    outDir: '../dist'
  },
});

My index.html is inside src folder:

|-- electron-builder.json5
|-- package-lock.json
|-- package.json
|-- src
|   |-- electron
|   |   |-- electron-env.d.ts
|   |   |-- main
|   |   |   `-- index.ts
|   |   `-- preload
|   |       `-- index.ts
|   |-- index.html
|   `-- web
|       |-- App.vue
|       |-- electron.d.ts
|       |-- env.d.ts
|       `-- main.ts
|-- tsconfig.json
|-- tsconfig.node.json
`-- vite.config.ts

0.10.0 (2022-10-09)

Break!

This is a redesigned version of the API_{^{(Only 3 APIs)}}. Not compatible with previous versions!

export type Configuration = {
  /**
   * Shortcut of `build.lib.entry`
   */
  entry?: import('vite').LibraryOptions['entry']
  /**
   * Triggered when Vite is built.  
   * If passed this parameter will not automatically start Electron App.  
   * You can start Electron App through the `startup` function passed through the callback function.  
   */
  onstart?: (this: import('rollup').PluginContext, startup: (args?: string[]) => Promise<void>) => void
  vite?: import('vite').InlineConfig
}

In the past few weeks, some issues have been mentioned in many issues that cannot be solved amicably. So I refactored the API to avoid design flaws. But despite this, the new version will only be easier rather than harder.

For example, some common problems in the following issues.

Multiple entry files is not support #86

Thanks to [email protected]'s lib.entry supports multiple entries, which makes the configuration of the new version very simple. So the [email protected] requires Vite at least v3.2.0.

e.g.

import electron from 'vite-plugin-electron'

// In plugins option
electron({
  entry: [
    'electron/entry-1.ts',
    'electron/entry-2.ts',
  ],
})

// Or use configuration array
electron([
  {
    entry: [
      'electron/entry-1.ts',
      'electron/entry-2.ts',
    ],
  },
  {
    entry: 'foo/bar.ts',
  },
])

require is not defined #48, #87

vite-plugin-electron-renderer will change output.format to cjs format by default_{^{(This is because currently Electron@21 only supports CommonJs)}}, which will cause the built code to use require to import modules, if the user nodeIntegration is not enabled in the Electron-Main process which causes the error require is not defined to be thrown.

[email protected] provides the nodeIntegration option. It is up to the user to decide whether to use Node.js(CommonJs).

e.g.

import renderer from 'vite-plugin-electron-renderer'

// In plugins option
renderer({
  nodeIntegration: true,
})

Use Worker in Electron-Main or Electron-Renderer #77, #81

You can see 👉 examples/worker

• Use Worker in Electron-Main

  e.g. _{^{This looks the same as multiple entry}}

  import electron from 'vite-plugin-electron'
  
  // In plugins option
  electron({
    entry: [
      'electron/main.ts',
      'electron/worker.ts',
    ],
  })
  
  // In electron/main.ts
  new Worker(path.join(__dirname, './worker.js'))
  

• Use Worker in Electron-Renderer

  e.g.

  import renderer, { worker } from 'vite-plugin-electron-renderer'
  
  export default {
    plugins: [
      renderer({
        // If you need use Node.js in Electron-Renderer process
        nodeIntegration: true,
      }),
    ],
    worker: {
      plugins: [
        worker({
          // If you need use Node.js in Worker
          nodeIntegrationInWorker: true,
        }),
      ],
    },
  }
  

TODO

• [ ] There is no way to differentiate between Preload-Scripts, which will cause the entire Electron App to restart after the preload update, not the Electron-Renderer reload.

rollupOptions: {
      input: {
          main: path.resolve(__dirname, 'index.html'),
          tabbar: path.resolve(__dirname, 'tabbar.html')
      },
      output: {
          chunkFileNames: 'static/js/[name]-[format]-[hash].js',
          entryFileNames: 'static/js/[name]-[format]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
  }

如果配置了多页面，同时配置了output的话，编译后就会提示无法加载_plugin-vue_export-helper.xxxx.js 并且多页面只能在根目录（vite.config.js同级）

The modules themselves are working fine, and the sourcemaps are there in their respective folders in node_modules, but the renderer can't load them:

DevTools failed to load source map: Could not load content for http://127.0.0.1:5173/resolve.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

I didn't see any existing issues about this so maybe something to do with my setup:

/* eslint-env node */

import vue from "@vitejs/plugin-vue";
import { join } from "path";
import { defineConfig } from "vite";
import renderer from "vite-plugin-electron-renderer";

const PACKAGE_ROOT = __dirname;

export default defineConfig({
    mode: process.env.MODE,
    root: PACKAGE_ROOT,
    envDir: process.cwd(),
    resolve: {
        alias: {
            "@": join(PACKAGE_ROOT, "src"),
            "!": join(PACKAGE_ROOT, "assets"),
            $: join(PACKAGE_ROOT, "../common"),
        },
    },
    base: "",
    server: {
        fs: {
            strict: true,
        },
    },
    build: {
        sourcemap: true,
        target: `es2022`,
        outDir: "dist",
        assetsDir: ".",
        rollupOptions: {
            input: join(PACKAGE_ROOT, "index.html"),
            output: {
                entryFileNames: "[name].cjs",
            },
        },
        emptyOutDir: true,
        reportCompressedSize: false,
        lib: {
            entry: "src/index.ts",
            formats: ["cjs"],
        },
    },
    plugins: [
        vue(),
        renderer({
            resolve() {
                return ["path", "fs", "stream", "os", "child_process", "node-fetch", "spring-map-parser", "tachyon-client", "sdfz-demo-parser", "octokit"];
            },
        }),
    ],
});

Any ideas how I can fix these, or otherwise hide the warnings?

I want to usenode:worker_threads.Worker for the heavy compute cost in the main process and something like hmr of the worker script files. similar to the main script, it will restart the electron app when developing the worker script files.

changes:

1. add additional option of worker, similar to the preload option.

export interface Configuration {
  main: CommonConfiguration & {
    /**
     * Shortcut of `build.lib.entry`
     */
    entry: LibraryOptions['entry']
  }
  preload?: CommonConfiguration & {
    /**
     * Shortcut of `build.rollupOptions.input`
     */
    input: InputOption
  }
  worker?: CommonConfiguration & {
    input: InputOption
  }
  /**
   * Support use Node.js API in Electron-Renderer
   * @see https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer
   */
  renderer?: Options
}

2. add example of how to use this.(playground/usecase-in-main)

Hi There,

There is no issue template so let me know if this is the right place. This (f28e66bdf1e6c4be28497865acab2e3db12b0e6b) commit broke our workflow for a package.

Can you explain your reasoning for transitioning from dist/electron to dist-electron? This makes development vs production builds bundle to different directories, which confuses the main entrypoint path in package.json. We will not be able to upgrade to v0.10.2 until this is reverted.

Thanks.

vite-plugin-electron vs vite-electron-plugin

1. They are both very simple. Just a simple configuration of the entry file is all that is needed.
2. They both listen for changes to the file and execute electron . command to start or restart the Electron App.

• vite-plugin-electron uses Vite builds such as Main-Process, Preload-Scripts, which are based on the build API provided by Vite, which means it works well with all of Vite's ecosystems.
• vite-electron-plugin is much faster(Not Bundle), it is only based on esbuild to convert .ts files, so it has very high performance. It has a plugin system that references Vite's implementation, but is not compatible with Vite's plugins.

关于 vite-plugin-electron 与 vite-electron-plugin

1. 它们都很简单。只是简单的配置入口文件即可。
2. 它们都是监听了文件的变化，当文件被构建完成或重新构建时执行 electron . 启动或重启 Electron App。

• vite-plugin-electron 使用 Vite 构建诸如 Main-Process、Preload-Scripts 它们都基于 Vite 提供的 build API。也就是说它能够很好的使用 Vite 的所有生态。
• vite-electron-plugin 更加的快(单文件编译)，它仅仅是基于 esbuild 转换 ts 文件，所以它具有非常高的性能。它具有一套参考 Vite 实现的插件系统，但不兼容 Vite 的插件。