electron-vite/electron-vite-react

:electron: Electron + Vite + React + Sass boilerplate.

electron-vite-react's Issues

能否运行web端！

如何同时支持web端运行打包？

Be Aware - Node.js API in the Electron rendering process

I have a question about this issue:

https://github.com/electron-vite/electron-vite-react#-be-aware

Does this issue only impact apps that intend to use the local file system and other Node.js APIs, or does this issue impact any usage of Vite with Electron?

For example, can the integration be disabled for thin client apps that will be talking to a remote server?

importing mongoose issues

I have multiple problems trying to make my electron app work with mongoose, it's work fin in Dev mode but once I try to build it and run it i get a lot of module path errors from mongoose, if i comment this code everything work fine, how I can import mongoose without issues:

const mongoose = require("mongoose");
mongoose.connect("mongodb://localhost/arwa")
  .then(() => console.log("Connected to MongoDB..."))
  .catch((err) => console.log("cannot connect to MongoDB", err));

How to specify in `vite.config.ts` file different app for different windows?

How to specify in https://github.com/electron-vite/electron-vite-react/blob/main/vite.config.ts different apps each for a different window?

For example:

/src/app
/src/app_A 
/src/app_B

where App.tsx and main.tsx are in /src/app :

/src/app/App.tsx
/src/app/main.tsx 

/src/app_A/App_A.tsx
/src/app_A/main_A.tsx

/src/app_B/App_B.tsx
/src/app_B/main_B.tsx

vite-electron-plugin 替代vite-plugin-electron之后，nodejs的配置丢失

最新创建的项目升级到vite-electron-plugin 之后，在react应用内部使用nodejs Api行不通了

Unexpected token 'delete'. Error useing axios

Uncaught SyntaxError: Unexpected token 'delete' (at __x00__axios:6:14)

build not working in windows environment

When running npm run build in windows environment
electron-builder tool does not run, electron-builder.js file runs

Entry point is invalid and release version is not working (Windows 11)

Issue 1:
The entry point is "dist-electron/main/index.js" but should be "dist-electron/electron/main/index.js" i guess?

Issue 2:
Once I change the entry point I can start the application in development mode but the release version which I created with yarn build won't start. It shows the following error message:

(node:24752) electron: Failed to load URL: file:///D:/electron-vite-react/release/2.1.0/win-unpacked/resources/app.asar/dist-electron/dist/index.html with error: ERR_FILE_NOT_FOUND
(Use `YourAppName --trace-warnings ...` to show where the warning was created)

[Help] 构建后无法载入样式文件

electron在构建之后无法使用import函数加载对应的样式，控制台没有报错

我尝试在prod中打印import('./light/index.less');是可以获取到对应的内容的，一个成功态的promise

在开发环境上样式文件可以被正常加载， 实现主题切换

export async function loadTheme(type:ThemeType = theme ?? ThemeType.LIGHT) {
  // 获取主题
  if (type === ThemeType.LIGHT) {
    // 加载样式文件
    import('./light/index.less');
    localStorage.setItem('theme', ThemeType.LIGHT);
    document.documentElement.setAttribute('class', ThemeType.LIGHT);
  }
  if (type === ThemeType.DARK) {
    // 加载样式文件
    import('./dark/index.less');
    localStorage.setItem('theme', ThemeType.DARK);
    document.documentElement.setAttribute('class', ThemeType.DARK);
  }
}

主进程怎么和渲染进程通讯

rollup uses require() with multiple inputs

When building an app with multiple inputs:

build: {
  rollupOptions: {
    input: {
      index: path.resolve(__dirname, 'index.html'),
      panel: path.resolve(__dirname, 'panel.html')
    }
  }
},

rollup automatically creates a shared app.<hash>.js file with all the common modules and requires it from both entry files.

However with Electron properly configured, require is not available in the renderer, so the app doesn't work. What is the correct way to make this work, either by inlining the common modules in both (larger file size) or selectively allowing require (I'd rather not?).

Auto-Build binaries, True DarkMode, CustomTitleBar

Hey, thanks for this amazing project!

I extended some things and created Vitron from it.

Maybe you find my gitactions useful.

• Auto-Build win, mac, linux binaries and create a release with autogenerated release-text from git commit messages
• Auto-Build and deploy inner react app to github pages

I also added a DarkMode Toggler, which will toggle muiTheme AND nativeTheme (incl. devtools)

as examples I extended your electron-store example and added a Zustand-example.

Custom Title Bar and System Tray can be activated via package.json

You can take anything you want from there. (Would be an honor)
Or ofc you guys can also join Vitron, i will give you access rights directly <3

Can't use with NextUI or Mantine : Invalid Hook Call

Hey,

I'm trying to use NextUi or Mantine, but I have each time an Warning: Invalid hook call :

It's with simple project setup with nothing else :

To reproduce

1. npm install @mantine/core @mantine/hooks
2. Apply code above

Windows 11

Error to run dev mode on Windows

Probably the version 2.1.0 introduce a bug on run dev mode on windows.

Using version 2.1.0, when run "npm run dev" the result error apears:

As we can see on the end of the log, the path looks like duplicated.

I tested the version 2.0.0 and everything is working well.

problem with ipcRenderer

during development it works fine, but with production build, once built ipcRenderer inside window in react is not recognized

Release Build fails

This issue consists of 2 parts: build command failing & release build not working. Tested on macOS Monterey M1.

1. The entry point definition in the package.json file is wrong, which causes the build command to fail. It currently states:

electron-vite-react/package.json

Line 9 in d6f989c

"main": "dist-electron/main/index.js",

But should be

"main": "dist-electron/electron/main/index.js",

After making that adjustment, the build command succeeds, however, the release does not work and shows the following error in the dev tools:

Not allowed to load local resource: file:///Users/wouter/Documents/demo/electron-vite-react/release/2.1.0/mac-arm64/YourAppName.app/Contents/Resources/app.asar/dist-electron/dist/index.html

why i Cant run Dev vite and windows Built App simultaneously

hi, I'm experiencing a weird issue just about opening Electron App, look i have built a new electron App named JSTools using your plugin electron-vite-react for windows platform, and everything worked fine i can launch it and use it, i did change it's appId productName icon in electron-builder.json5, when it's running it's show JSTools.exe in my taskbar process list, but the problem happen when i try to launch it when I'm working in another App on vscode and dev vite is running, i can't launch my app , same happen if JSTools.exe is running, and launch npm run dev vite, when dev vite is run i get this in my taskbar :

when my JSTools.exe is run i get this in my taskbar:

they are not the same process why i cant open them simultaneously, i also did change ports for dev vite:

Request: Dev mode to also use file:// protocol

In electron-vite-react the developer mode serves index.html from a web server on localhost, but the build serves that file using the file:// protocol. Can this be changed such that development mode also uses a file?

The reason I'm requesting this is that http: and file: have a different permission structure in browsers, so things that work fine in development mode could break in production, and this is a breeding ground for bugs.

For example, cookies work on localhost but not on the file: protocol. Conversely, loading images from disk (with the file: protocol) and showing them works if you load them from a page served over the file: protocol but are prevented from being shown due to cross-origin security on localhost.

Making sure the development and production environments of your app are served over the same protocol means there is a smaller chance for bugs related to that difference.

[bug]: Failed to construct 'URL': Invalid URL

Screenshort

The images in the development are work normally, which is presumed to be caused by the BUG of processing dynaimc-import images when Vite is built.

在开发环境图片正常显示，推测是 vite 构建时处理动态引入的图片出现问题导致的

Reproduce

• System: Windows
• Clone this repository, exec yarn && yarn build
• cd ./release/2.0.0/win-unpacked, click and run YourAppName.exe

vite + tailwind + react, css modules dont work everything is global:

i'm actually using vite react and tailwind with default config, this is my postcss.config.js :
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }

and I'm also using a syncfusion Grid table that has a built in css classes, since I'm using it in multiple other components, i just wanted to hide this table header in just one react component, so i did add to my component a css file named noHeaderGrid.module.css with this code on it :
.e-grid .e-gridheader .e-columnheader{ display: none ; }
the style did apply, but to all other grid tables in other component also, why is css modules not working properly, everything is global

debugging is not working in VSCode

I tried setting the same breakpoints outlined in the preview of the readme and they don't seem to be working.

this is my version info for VSCode:

Version: 1.71.0
Commit: 784b0177c56c607789f9638da7b6bf3230d47a8c
Date: 2022-09-01T07:25:10.472Z
Electron: 19.0.12
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Linux x64 5.14.0-1050-oem snap
Sandboxed: No

I'm also running Ubuntu 20.04 LTS

useEffect bug on dev mode

在 dev mode 下
useEffect(() => {
console.log(111);
}, [])
似乎会调用两次，打包后是正常的，是什么问题呢

Resizing of app is very slow

I cloned the project, and tested it for performance and other stuff, the things that's slow here is resizing of the app. I tried this last month too and it was working fine, Maybe some changes in the past weeks broke something. Here's a screenshot for the same.
This is on the production build.

Electron-builder packages previous state of my app (all platforms)

Hi everyone, i have a big problem here, when i develop my app and run with npm run dev command i can see one state of my app who its correct (latest changes) but when i run npm run build command and open my App Image app (Im working on Ubuntu) i see a before state of my app. I will attach images below from my 2 apps (dev and prod)

This is dev environment with 3 different routes and buttons to change between

This is prod environment, anything visible, previous to create routes

My package.json scripts are:

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build && electron-builder build",
    "build:win": "tsc && vite build && electron-builder -w",
    "build:mac": "tsc && vite build && electron-builder -m",
    "build:gnu": "tsc && vite build && electron-builder -l"
  },

And my electron-builder conf are:

{
  appId: "com.caja.mc",
  productName: "Caja MC",
  copyright: "Copyright © 2022 ${author}",
  asar: true,
  directories: {
    output: "release/${version}",
    buildResources: "electron/resources",
  },
  files: ["./dist", "./src", "./node_modules"],
  win: {
    target: [
      {
        target: "nsis",
        arch: ["x64"],
      },
    ],
    artifactName: "${productName}-Windows-${version}-Setup.${ext}",
  },
  nsis: {
    oneClick: false,
    perMachine: false,
    allowToChangeInstallationDirectory: true,
    deleteAppDataOnUninstall: false,
  },
  mac: {
    target: ["dmg"],
    artifactName: "${productName}-Mac-${version}-Installer.${ext}",
  },
  linux: {
    target: ["AppImage"],
    artifactName: "${productName}-Linux-${version}.${ext}",
    category: "Office"
  },
}

Issue in the `packaging phase`

I discovered that the simple electron-vite-react app with two windows works fine in development mode, but not in "packaged mode":

When commenting the relative part in vite.config.js :

  build: {
    rollupOptions: {
      input: {
        index: join(__dirname, 'index.html'),
        //index_A: join(__dirname, 'index_A.html'),
      },
    },
  },

and in electron/main/index.ts :

app.whenReady().then( () => {
  createMainWindow()
  //Menu.setApplicationMenu(menu)
})

both dev mode and packaged mode work fine:

raphy@pc:~/VitePlayground$ yarn run build
yarn run v1.22.15
$ tsc && vite build && electron-builder
(node:21908) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
vite v2.9.12 building for production...
✓ 1 modules transformed.
dist/electron/preload/ipcpreload.js   2.50 KiB / gzip: 0.99 KiB
dist/electron/preload/ipcpreload.js.map 11.79 KiB
vite v2.9.12 building for production...
✓ 1 modules transformed.
dist/electron/main/index.js   1.34 KiB / gzip: 0.77 KiB
vite v2.9.12 building for production...
✓ 36 modules transformed.
dist/index.html           0.61 KiB
dist/style.9f994278.css   1.46 KiB / gzip: 0.63 KiB
dist/index.90df7efd.js    140.63 KiB / gzip: 45.34 KiB
  • electron-builder  version=23.0.3 os=5.13.0-51-generic
  • loaded configuration  file=/home/raphy/VitePlayground/electron-builder.json5
  • writing effective config  file=release/2.0.0/builder-effective-config.yaml
  • packaging       platform=linux arch=x64 electron=19.0.4 appOutDir=release/2.0.0/linux-unpacked
  • building        target=AppImage arch=x64 file=release/2.0.0/YourAppName-Linux-2.0.0.AppImage
  • application Linux category is set to default "Utility"  reason=linux.category is not set and cannot map from macOS docs=https://www.electron.build/configuration/linux
Done in 8.18s.

When index_A is activated in vite.config.ts :

  build: {
    rollupOptions: {
      input: {
        index: join(__dirname, 'index.html'),
        index_A: join(__dirname, 'index_A.html'),
      },
    },
  },

and the menu part is activatedin /electron/main/index.ts :

app.whenReady().then( () => {
  createMainWindow()
  Menu.setApplicationMenu(menu)
})

the development mode works fine as before :

raphy@pc:~/VitePlayground$ yarn dev
yarn run v1.22.15
$ vite
(node:22320) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

  vite v2.9.12 dev server running at:

  > Local: http://127.0.0.1:7777/

  ready in 215ms.

vite v2.9.12 building for development...

watching for file changes...

build started...
vite v2.9.12 building for development...

watching for file changes...

build started...
✓ 1 modules transformed.
transforming (1) electron/main/index.tsdist/electron/preload/ipcpreload.js   4.21 KiB / gzip: 1.21 KiB
dist/electron/preload/ipcpreload.js.map 12.28 KiB
built in 92ms.
✓ 2 modules transformed.
dist/electron/main/index.js   3.95 KiB / gzip: 1.25 KiB
built in 92ms.
[22373:0618/165407.120600:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.
4:54:07 PM [vite] warning: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
32 |              lineNumber: 15,
33 |              columnNumber: 13
34 |            }, this)
   |               ^
35 |          }, void 0, false, {
36 |            fileName: _jsxFileName,

  Plugin: vite:esbuild
  File: /home/raphy/VitePlayground/src/app/components/App.tsx

But the production mode, the release produced with yarn run build does not work anymore :

raphy@pc:~/VitePlayground$ yarn run build
yarn run v1.22.15
$ tsc && vite build && electron-builder
(node:22549) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
vite v2.9.12 building for production...
✓ 1 modules transformed.
dist/electron/preload/ipcpreload.js   2.50 KiB / gzip: 0.99 KiB
dist/electron/preload/ipcpreload.js.map 11.79 KiB
vite v2.9.12 building for production...
✓ 2 modules transformed.
dist/electron/main/index.js   2.40 KiB / gzip: 1.02 KiB
vite v2.9.12 building for production...
✓ 39 modules transformed.
dist/index_A.html          0.67 KiB
dist/index.html            0.67 KiB
dist/index.2ba947a6.js     1.71 KiB / gzip: 0.75 KiB
dist/index_A.ab7b482d.js   0.33 KiB / gzip: 0.25 KiB
dist/style.9f994278.css    1.46 KiB / gzip: 0.63 KiB
dist/index.8bf949c4.js     139.11 KiB / gzip: 44.69 KiB
  • electron-builder  version=23.0.3 os=5.13.0-51-generic
  • loaded configuration  file=/home/raphy/VitePlayground/electron-builder.json5
  • writing effective config  file=release/2.0.0/builder-effective-config.yaml
  • packaging       platform=linux arch=x64 electron=19.0.4 appOutDir=release/2.0.0/linux-unpacked
  • building        target=AppImage arch=x64 file=release/2.0.0/YourAppName-Linux-2.0.0.AppImage
  • application Linux category is set to default "Utility"  reason=linux.category is not set and cannot map from macOS docs=https://www.electron.build/configuration/linux
Done in 8.11s.
raphy@pc:~/VitePlayground$ 

raphy@pc:~/VitePlayground/release/2.0.0$ ./YourAppName-Linux-2.0.0.AppImage 
[22710:0618/165813.204491:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.

I tried to modify the path also in packaged mode :

  if (app.isPackaged) {
    //WindowTypeA.loadFile(join(__dirname, '../../index_A.html'))
    WindowTypeA.loadURL(url + '/../../index_A.html')
  } else {
    WindowTypeA.loadURL(url + '/../../index_A.html')
    WindowTypeA.webContents.openDevTools()

}

But again it does not work

Based on what I read here: https://vitejs.dev/guide/build.html#multi-page-app the build configuration :

  build: {
    rollupOptions: {
      input: {
        index: join(__dirname, 'index.html'),
        index_A: join(__dirname, 'index_A.html'),
      },
    },

seem ok

Shouldn't be doing everyhing electron-builder ?

The boilerplate indicated in the electron-builder DOCS : https://www.electron.build/#boilerplates electron-vite-vue , in the build phase : https://github.com/electron-vite/electron-vite-vue/blob/main/package.json#L10 uses the same steps: vite build && electron-builder

What am I missing or / and doing wrongly in thepackaging phase ?

Here you can find the repo, which is nothing else than the electron-vite-react app, where I added a second window, that can be opened from the menu :

https://github.com/raphael10-collab/VitePlayground.git

Looking forward to your kind help

useEffect触发两次

Imports from electron

Hi! First of all, I'm new to Electron and its ecosystem, but your Vite-React boilerplate is the best I found so far, love it! ❤️

I've got stuck importing stuff from electron. For example:

// src/renderer/src/App.tsx

import { clipboard } from "electron"

function App() {
	const addToClipboard = () => {
		clipboard.writeText("Example String", "selection")
		console.log(clipboard.readText("selection"))
	}

	return (
		<div className='App'>
			<button onClick={addToClipboard}>Click me</button>
		</div>
	)
}

export default App

And I only get this error in the console:

Uncaught ReferenceError: require is not defined at electron.js:5

Also to mention, there are a few errors in the terminal which appears after running npm run dev:

[0122/180339.314:ERROR:registration_protocol_win.cc(102)] CreateFile: ═х єфрхЄё  эрщЄш єърчрээ√щ Їрщы. (0x2)
[0122/180339.358:ERROR:registration_protocol_win.cc(102)] CreateFile: ═х єфрхЄё  эрщЄш єърчрээ√щ Їрщы. (0x2)
[14232:0122/180339.788:ERROR:CONSOLE(1)] "SyntaxError: Unexpected end of JSON input", source: devtools://devtools/bundled/entrypoints/main/main.js (1)

The first two of them are probably because I have the Russian language as the system default and it tries to create files with a Chinese name (?)

I wonder if I'm doing something wrong or just missing something. Can you help me?

Node v17.2.0
NPM v8.1.4
Windows 11 build 22000

"devDependencies": {
      "@types/react": "^17.0.33",
      "@types/react-dom": "^17.0.10",
      "@vitejs/plugin-react": "^1.0.7",
      "electron": "^15.3.0",
      "electron-builder": "^22.13.1",
      "react": "^17.0.2",
      "react-dom": "^17.0.2",
      "typescript": "^4.4.4",
      "vite": "^2.6.13",
      "vite-plugin-resolve": "^1.3.1"
}

linux icon is not working

Hi, thanks for your hard work on this template. I was wondering if you could point out how to add a linux icon here?

Thanks again!

Window resizing is very laggy

Hi, Thanks for your amazing boilerplate!

I noticed that when you resize the window the html on the inside behaves very laggy.

eslint

Hello and thank you for your template.
How can I setup eslint for this project? I have a eslintrc.json file but it does not seem to lint my files properly

require is not defined

)

• Windows 11 Pro 10.0.22621 Build 22521
• Node 16.13.2

大佬，请问怎么使用fetch

Application entry file "build/electron.js" in the "app.asar" does not exists

  ⨯ Application entry file "build/electron.js" in the "xxxxxx/release/1.0.0/mac-arm64/Portkey.app/Contents/Resources/app.asar" 
does not exist. Seems like a wrong configuration.  failedTask=build stackTrace=Error: Application entry file "build/electron.js" in the 
"xxxxxx/release/1.0.0/mac-arm64/Portkey.app/Contents/Resources/app.asar" does not exist. Seems like a wrong configuration.

打包mac时遇到如上错误

After the main thread references the electron-store, the dependency is lost

Greetings,
I need some help 🙏

Normal in dev mode, lost after packaging

`
"dependencies": {

"electron-store": "^8.1.0",

},
`

It is these dependencies that are not found in the source code in the electronic store

electron-builder config extension

I tried to run the app with npm run build but wasn't able to build the app and rather it leads to opening the file electron-builder.js.
And I have read the docs on https://www.electron.build/cli.html. Which it default to .yml .json .json5 file extension.
So I'm wondering is there some extra configuration needed, to allow running electron-builder CLI with .js extension?

Cannot find module './addon.node'

require("自己c++编译.node文件"，报了这个错误
Error: Cannot find module './addon.node'
Require stack:

• /Users/vidy/Desktop/兄/study/electron-vite-react/dist/main/index.cjs
• /Users/vidy/Desktop/兄/study/electron-vite-react/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js
• at Module._resolveFilename (node:internal/modules/cjs/loader:940:15)
  at Function.n._resolveFilename (node:electron/js2c/browser_init:245:1105)
  at Module._load (node:internal/modules/cjs/loader:785:27)
  at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
  at Module.require (node:internal/modules/cjs/loader:1012:19)
  at require (node:internal/modules/cjs/helpers:102:18)
  at Object. (/Users/vidy/Desktop/兄/study/electron-vite-react/dist/main/index.cjs:2003:1)
  at Module._compile (node:internal/modules/cjs/loader:1116:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1169:10)
  at Module.load (node:internal/modules/cjs/loader:988:32)

文件目录结构如下

Antd compilation

I can see that you for some reason removed the Antd. Could you please guide me how to include it again but this time vite to build it from less? Thank you

Support for vscode debug mode

Add VSCode debug launch/tasks for both of the following to help make setting break points a possiblity.

• React
• Electron

worker文件应该放在哪里呢

preload有单独的文件夹，worker文件是否应该也有单独的文件夹进行编译输出呢，vite不是很熟悉

代码混淆

现在的版本换用了新的electron vite插件，但是注意到打包后没有进行任何的混淆，几乎就是源代码没动，是否计划支持混淆呢？

npm run dev and some error

$ npm run dev

node scripts/watch.mjs

file://vite-react-electron-main/scripts/watch.mjs:6
import { createServer, build as viteBuild } from 'vite'
^^^^^
SyntaxError: The requested module 'vite' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'vite';

微信二维码过期呢

hmr not working with jsx

by working on jsx it seems like vite is not detecting any changes at all , any thing to add to config ?

With contextIsolation: true the app doesn't show up

With contextIsolation: true the app doesn't show up

As described in the Electron Docs: https://www.electronjs.org/docs/latest/tutorial/context-isolation/ , contextIsolation is important for security purposes

How to make it work with contextIsolation: true ?

Change default directories

Hey!

I just tried the v2.1.0, and want to change the default directories for main and preload. Let's say if I want to change the directory from:

./electron/preload

to:

./preload

How to achieve that? Because in build version, preload doesn't load if we change the directories.
Thanks in Advance.

[Request] Start inner react app

Hi,

first of all THANKS for this amazing project.

Would it be possible to add a yarn start script to start the devserver for inner react app without the electron wrapper?

I would like to start and build the web-project isolated (like yarn vite) ontop of the current yarn dev and yarn build for the electron

as naming, we could also use something like:
yarn dev:renderer
yarn build:renderer

Thank you soo much
Blade

window.electronAPI is undefined

在页面无法获取到 window.electronAPI

🐞 The value of "process.env.NODE_ENV" is always "production"

Appearance

In the first line of the "watch. MJS" file, I specified process.env.NODE_ENV = 'development'

https://github.com/caoxiemeihao/vite-react-electron/blob/e4087edffe9ec51124e3753228dda6f224a6f484/scripts/watch.mjs#L1

---

But in the vite.config.mjs file, I always get "production".

https://github.com/caoxiemeihao/vite-react-electron/blob/e4087edffe9ec51124e3753228dda6f224a6f484/scripts/vite.config.mjs#L8

require is not defined

const M = require("url");

export default M;

export const Url = M.Url;
export const parse = M.parse;
export const resolve = M.resolve;
export const resolveObject = M.resolveObject;
export const format = M.format;
export const URL = M.URL;
export const URLSearchParams = M.URLSearchParams;
export const domainToASCII = M.domainToASCII;
export const domainToUnicode = M.domainToUnicode;
export const pathToFileURL = M.pathToFileURL;
export const fileURLToPath = M.fileURLToPath;
export const urlToHttpOptions = M.urlToHttpOptions;

Cannot write file 'path/to/project/dist/main/index.cjs' because it would overwrite input file.

I encounter this problem in VS Code when using electron-vite with react:

[
  {
    "resource": "path/to/project/tsconfig.json",
    "owner": "typescript",
    "severity": 8,
    "message": "Cannot write file 'path/to/project/dist/main/index.cjs' because it would overwrite input file.",
    "source": "ts",
    "startLineNumber": 1,
    "startColumn": 1,
    "endLineNumber": 1,
    "endColumn": 2
  }
]

Is there any way to fix it?