feat(plugin-vite): upgrade to vite@5

[caoxiemeihao]

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project follows, as appropriate.
• The changes are appropriately documented (if applicable).
• The changes have sufficient test coverage (if applicable).
• The testsuite passes successfully on my local machine (if applicable).

Summarize your changes:

Fixes:

#3309
#3423
#3439
#3466

Breaks:

Drawing lessons form the bugs encountered, this PR change is very significant. Moving most of the logic form plugin/vite to template/vite will bring the following benefits.

1. Adapt to the very fast release pace of Vite, and users can modify the version of Vite in the template at any time.
2. If users encounter some problems, users can solve them by directly modifying the vite.config.mjs in the template(local project).
3. More transparent and flexible Vite config.
4. It is easy to implement hot-restart and hot-reload 🔥

• feat(plugin-vite): hot-restart 🔥 #3203
• refactor(core): allow restart logic to be triggered using an event #3380

[erickzhao]

two quick comments before reviewing the code in-depth

[BlackHole1]

CI failed. Can you fix it?

[Stanzilla]

Looks like a Windows only fluke?

[caoxiemeihao]

Looks like a Windows only fluke?

After Vite is built, deletion fails on Windows.

[caoxiemeihao]

About CI failed on Windows 😅

It seems that Windows platforms have resource occupancy issues when using Native addons. Previously, esbuild.exe occupied file resources, but now it has become rollup@4+(vite@5+).

This is a headache and I don't know how to end the rollup.win32-x64-msvc.node resource usage problem.
The problems currently encountered are as follows:

• kill esbuild.exe ✅
• kill rollup.win32-x64-msvc.node ❌. Can anyone provide me with some help? 🤔

The error occur here 👉

---

esbuild.exe native addons error (resolved ✅)

Error: EBUSY: resource busy or locked, rmdir '\\?\C:\Users\Administrator\Desktop\forge-test-vite-2'
    at rmdirSync (node:fs:1222:10)
    at _rmdirSync (node:internal/fs/rimraf:235:5)
    at rimrafSync (node:internal/fs/rimraf:193:7)
    at Object.rmSync (node:fs:1271:10)
    at Timeout.remove [as _onTimeout] (D:\cxmh\electron-forge-vite-large\packages\template\vite-typescript\test\ViteTypeScriptTemplate_spec_slow.ts:33:12)
    at listOnTimeout (node:internal/timers:569:17)
    at processTimers (node:internal/timers:512:7) {
  errno: -4082,
  syscall: 'rmdir',
  code: 'EBUSY',
  path: '\\\\?\\C:\\Users\\Administrator\\Desktop\\forge-test-vite-2'
}

---

rollup native addons error (not resolved yet ❌)

Error: EPERM: operation not permitted, unlink '\\?\C:\Users\Administrator\Desktop\forge-test-vite-2\node_modules\@
    at unlinkSync (node:fs:1881:3)
    at _unlinkSync (node:internal/fs/rimraf:214:14)
    at fixWinEPERMSync (node:internal/fs/rimraf:306:5)
    at rimrafSync (node:internal/fs/rimraf:200:14)
    at node:internal/fs/rimraf:253:9
    at Array.forEach (<anonymous>)
    at _rmdirSync (node:internal/fs/rimraf:250:7)
    at fixWinEPERMSync (node:internal/fs/rimraf:304:5)
    at rimrafSync (node:internal/fs/rimraf:200:14)
    at node:internal/fs/rimraf:253:9
    at Array.forEach (<anonymous>)
    at _rmdirSync (node:internal/fs/rimraf:250:7)
    at fixWinEPERMSync (node:internal/fs/rimraf:304:5)
    at rimrafSync (node:internal/fs/rimraf:200:14)
    at node:internal/fs/rimraf:253:9
    at Array.forEach (<anonymous>)
    at _rmdirSync (node:internal/fs/rimraf:250:7)
    at fixWinEPERMSync (node:internal/fs/rimraf:304:5)
    at rimrafSync (node:internal/fs/rimraf:200:14)
    at node:internal/fs/rimraf:253:9
    at Array.forEach (<anonymous>)
    at _rmdirSync (node:internal/fs/rimraf:250:7)
    at fixWinEPERMSync (node:internal/fs/rimraf:304:5)
    at rimrafSync (node:internal/fs/rimraf:200:14)
    at Object.rmSync (node:fs:1271:10)
    at Timeout.remove [as _onTimeout] (D:\cxmh\electron-forge-vite-large\packages\template\vite-typescript\test\Vi
    at listOnTimeout (node:internal/timers:569:17)
    at processTimers (node:internal/timers:512:7) {
  errno: -4048,
  syscall: 'unlink',
  code: 'EPERM',
  path: '\\\\?\\C:\\Users\\Administrator\\Desktop\\forge-test-vite-2\\node_modules\\@rollup\\rollup-win32-x64-msvc
}

[BlackHole1]

Thank you for the effort you have put into this work.

Regarding the failure of unit tests on Windows, my opinion is: "Perhaps we don't need to perform the fs.rmSync operation here."

The reason we need to call fs.rmSync is to avoid excessive disk usage, as Windows does not automatically delete TMPDIR.

In node.js, once you load some node addon, you will find that you cannot reset it. Node.js will hold onto it continuously due to this feature, combined with the file lock in Windows (a file handle can only be held by one process). This is why you encountered this issue.

So, all you need to do is remove the fs.rmSync method here and modify the test script in package.json to something like this: "test": "npm run clear:test && npm run test:slow".

The purpose of test:clear is to delete all folders under os.tmpdir() that start with electron-forge-test-.

PTAL @erickzhao @erikian

[Stanzilla]

If it helps, I always use git clean -xdf instead of cleanup scripts for files that are not checked in. You can also specify a directory to only delete one like git clean -xdf tests

[erickzhao]

macOS CI seems to be failing due to this specific line of code now. If I revert to the previous state (using os.homedir(), the tests pass.

The problem seems to be fixed when I set resolve.preserveSymlinks = true in the renderer config, but I don't know if this is what we want in production.

diff --git a/packages/plugin/vite/src/VitePlugin.ts b/packages/plugin/vite/src/VitePlugin.ts
index 6e71ca7c6..e658bda55 100644
--- a/packages/plugin/vite/src/VitePlugin.ts
+++ b/packages/plugin/vite/src/VitePlugin.ts
@@ -193,6 +193,9 @@ the generated files). Instead, it is ${JSON.stringify(pj.main)}`);
   buildRenderer = async (): Promise<void> => {
     for (const userConfig of await this.configGenerator.getRendererConfig()) {
       await vite.build({
+        resolve: {
+          preserveSymlinks: true,
+        },
         configFile: false,
         ...userConfig,
       });

[caoxiemeihao]

If we put resolve.preserveSymlinks in tmpl/vite.renderer.config.ts, users can remove it at any time.

import { type UserConfig, defineConfig } from 'vite';
import { pluginExposeRenderer } from './vite.base.config';

// https://vitejs.dev/config
export default defineConfig((env) => {
  const { root, mode, forgeConfigSelf } = env as ForgeConfigEnv<'renderer'>;
  const name = forgeConfigSelf.name ?? '';

  return {
    root,
    mode,
    base: './',
    build: {
      outDir: `.vite/renderer/${name}`,
    },
    plugins: [pluginExposeRenderer(name)],
+   resolve: {
+     preserveSymlinks: true,
+   },
    clearScreen: false,
  } as UserConfig;
});

[BlackHole1]

It seems to be caused by fast-glob? Maybe you can use os.readdir(os.tmpdir()); instead?

[liautaud]

Note that this option can break the Vite dev server when the Electron Forge project is part of a monorepo with workspaces (e.g. Yarn workspaces, Turborepo etc.). This seems to happen because workspaces work by adding symlinks to each workspace's source folder inside node_modules, so messing with symlink resolution means the dependency pre-bundling step can no longer tell that files which are part of other workspaces in the monorepo are actually source files instead of dependencies. As a result, the CommonJS/UMD compatibility step breaks, and users can end up with weird "the requested module does not provide an export named default" errors.

And since this preserveSymlinks: true option is now "hidden" as part of the base vite.renderer.config.ts instead of being part of the user's project, it took me a while to diagnose the error.

[GitMurf]

There were a lot of linked gh issues about ESM support but was this PR supposed to address ESM? I still cannot get the vite-typescript plugin to work with ESM type: module.

In this comment @caoxiemeihao closed the issue related to ESM linking to this PR but it does not seem like it was actually related to that, was it? #3439 (comment)

I apologize as I am very confused but I have tried everything I know how to get it to work and to track down the status of ESM for vite-typescript but keep hitting dead ends. Thanks in advance for help/updates!