[Bug] Having alias for electron folder disables hot reload

[mchammer104]

Describe the bug

Hi everybody. I made '@@' for electron folder. But, for some reason it disables hot reload and any time I change anything in the main process it only shows this in the terminal and then nothing happens.

build started...
transforming (1) electron\main.ts

Here is my Vite config.

import {defineConfig} from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr';
import visualizer from "rollup-plugin-visualizer";

export default defineConfig({
    plugins: [
        visualizer({
            filename: 'dist/stats.html', // Output file path
            open: false,
        }),
        react(),
        svgr(),
        electron({
            main: {
                // Shortcut of `build.lib.entry`.
                entry: 'electron/main.ts',
                vite: {
                    resolve: {
                        alias: {'@@': path.resolve(__dirname, 'electron')}
                    }
                }
            },
            preload: {
                // Shortcut of `build.rollupOptions.input`.
                // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
                input: path.join(__dirname, 'electron/preload.ts'),
            },
            // Ployfill the Electron and Node.js built-in modules for Renderer process.
            // See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer
            renderer: {},
        }),
    ],
    resolve: {
        alias: [
            {find: '@', replacement: path.resolve(__dirname, 'src')},
        ],
    },

    build: {
        sourcemap: true,
    }
})

[ViniciusFXavier]

@mchammer104

You’re currently adding it inside the vite config under the electron({ ... }) plugin block:

However, this vite block is used by vite-plugin-electron to configure the Electron build pipeline and not Vite’s global config.
This means that the alias may not be picked up correctly by the dev server or hot reload system, especially since vite-plugin-electron wraps Electron logic, not Vite’s.

Moving the alias directly to the root resolve.alias inside the top-level defineConfig() should work correctly:

export default defineConfig({
  ..., // your code
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      { find: '@@', replacement: path.resolve(__dirname, 'electron') }, // <— move it here
    ],
  },
}

And remember to put the alias in tsconfig.json too.

{
  "compilerOptions": {
    ..., // your config
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@@/*": [
        "electron/*"
      ],
    },
  },
}

Try defining your alias in the root config and restart the dev server. That should restore proper hot reload behavior.

---

Another thing I noticed is that your file does not comply with the example standard in this repo, consider taking a look to see if everything is correct and if you are not using an old version.

This matches the structure used in the official template:
👉 https://github.com/electron-vite/electron-vite-react/blob/main/vite.config.ts

[ViniciusFXavier]

I'm working on a project that is divided into three parts: web, electron, and server. A large portion of the code from the web is reused by the electron app, and there's also shared code across all three environments (web, electron, and server), which is stored in a common folder.

Currently, in my electron project (based on electron-vite-react), I use the following alias configuration:

---

vite.config.ts (Electron)

Here’s the alias setup I'm using in vite.config.ts:

import path from 'path'
import { rmSync } from 'fs'
import { defineConfig } from 'vite'

export default defineConfig(({ command }) => {
  return {
    resolve: {
      alias: {
        '@': path.join(__dirname, 'src'), // local src of electron
        'common': path.join(__dirname, '../common'), // shared code (web, electron, server)
        'web': path.join(__dirname, '../web/src'), // reused web code
        'server': path.join(__dirname, '../server/src') // optional: I end up using it more to reuse server typings
      },
    },
    // ... my other vite config
  }
})

---

tsconfig.json (Electron)

My tsconfig.json reflects the same aliases for proper IntelliSense and compiler support:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"],
      "common/*": ["../common/*"],
      "web/*": ["../web/src/*"],
      "server/*": ["../server/src/*"]
    },
    // ... my other compiler options
  },
  "include": ["src", "electron", "../common", "../web/src", "../server/src"]
}

[mchammer104]

@ViniciusFXavier Thank you for reply. It seems I might have posted this issue in the wrong place, but I can't remember where I got my app template. But, back to the problem. If I move alias: {'@@': path.resolve(__dirname, 'electron')} to the root like you shown above, I'm starting to get error like this:

[vite]: Rollup failed to resolve import "@@/IPC-channels.ts" from "E:/projects/my-electon-project/electron/main.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

which does not make any sense because file IPC-channels.ts is in electron folder and the alias should work.