When I run bun run build I encountered this error:
➜ hydra git:(main) ✗ bun run build
$ tsc && vite build && electron-builder
vite v5.4.11 building for production...
✓ 806 modules transformed.
vite v5.4.11 building for production...
✓ 997 modules transformed.
dist-electron/main.js 0.20 kB │ gzip: 0.17 kB
dist-electron/typescript-DOyFCds-.js 0.27 kB │ gzip: 0.21 kB
dist-electron/BrowserWebSocketTransport-Bn0KCDWB.js 1.35 kB │ gzip: 0.59 kB
dist-electron/bidi-B16nNrjq.js 417.56 kB │ gzip: 95.15 kB
dist-electron/main-D4w2rd8U.js 8,538.36 kB │ gzip: 1,955.66 kB
✓ built in 17.15s
vite v5.4.11 building for production...
✓ 1 modules transformed.
dist-electron/preload.mjs 0.97 kB │ gzip: 0.34 kB
✓ built in 41ms
x Build failed in 19.59s
error during build:
[vite]: Rollup failed to resolve import "shared/utils" from "/home/bluven/Workspace/web/hydra/src/views/browser/users/index.tsx".
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`
at viteWarn (file:///home/bluven/Workspace/web/hydra/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65589:17)
at onwarn (file:///home/bluven/Workspace/web/hydra/node_modules/@vitejs/plugin-react/dist/index.mjs:280:9)
at onRollupWarning (file:///home/bluven/Workspace/web/hydra/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65619:5)
at onwarn (file:///home/bluven/Workspace/web/hydra/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65284:7)
at file:///home/bluven/Workspace/web/hydra/node_modules/rollup/dist/es/shared/node-entry.js:19475:13
at Object.logger [as onLog] (file:///home/bluven/Workspace/web/hydra/node_modules/rollup/dist/es/shared/node-entry.js:21201:9)
at ModuleLoader.handleInvalidResolvedId (file:///home/bluven/Workspace/web/hydra/node_modules/rollup/dist/es/shared/node-entry.js:20090:26)
at file:///home/bluven/Workspace/web/hydra/node_modules/rollup/dist/es/shared/node-entry.js:20048:26
error: script "build" exited with code 1
I have put my project online : https://github.com/bluven/hydra/tree/error-demo.
This line triggered that error: import utils from 'shared/utils';
I created a folder named shared at the root folder so that main and renderer can share codes, but it turns out not possible.
I couldn’t understand why this happened, since renderer could import code in electron folder:
import type { BrowserActivity, User } from 'electron/browser';
I tried to add shared to include in tsconfig.json, but it didn’t work and adding alias in both tsconfig and vite.config also didn’t work.
So here is my problem:
- What should I do to share code between main and renderer?
- Why shared cannot be resolved while electron folder can ?
What’s even more weird.
Here is a demo project https://github.com/bluven/learn-vite-electron. I created it to show the import resolve problem, but unfortunately I got similar problem:
bun dev
$ vite
vite v5.4.11 building for development...
watching for file changes...
vite v5.4.11 building for development...
watching for file changes...
VITE v5.4.11 ready in 244 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
build started...
build started... (x2)
✓ 1 modules transformed.
✓ 1 modules transformed. (x2)
dist-electron/preload.mjs 0.67 kB │ gzip: 0.27 kB
built in 113ms.
dist-electron/main.js 1.46 kB │ gzip: 0.66 kB
built in 114ms.
[11952:1222/145113.528099:ERROR:command_buffer_proxy_impl.cc(131)] ContextResult::kTransientFailure: Failed to send GpuControl.CreateCommandBuffer.
2:51:13 PM [vite] Internal server error: Failed to resolve import "electron/settings" from "src/main.tsx". Does the file exist?
Plugin: vite:import-analysis
File: /home/bluven/Workspace/web/learn-vite-electron/src/main.tsx:5:22
4 | import App from "./App.tsx";
5 | import "./index.css";
6 | import settings from "electron/settings";
| ^
7 | ReactDOM.createRoot(document.getElementById("root")).render(
8 | /* @__PURE__ */ jsxDEV(React.StrictMode, { children: /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
at TransformPluginContext._formatError (file:///home/bluven/Workspace/web/learn-vite-electron/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49255:41)
at TransformPluginContext.error (file:///home/bluven/Workspace/web/learn-vite-electron/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49250:16)
at normalizeUrl (file:///home/bluven/Workspace/web/learn-vite-electron/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64041:23)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///home/bluven/Workspace/web/learn-vite-electron/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64173:39
at async Promise.all (index 5)
at async TransformPluginContext.transform (file:///home/bluven/Workspace/web/learn-vite-electron/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64100:7)
at async PluginContainer.transform (file:///home/bluven/Workspace/web/learn-vite-electron/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49096:18)
at async loadAndTransform (file:///home/bluven/Workspace/web/learn-vite-electron/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:51929:27)
2:51:13 PM [vite] Pre-transform error: Failed to resolve import "electron/settings" from "src/main.tsx". Does the file exist?
As you can see, I tried to import ‘electron/settings’ in src/main.ts, but it also failed to located the file. I don’t understand why this didn’t happened in hydra since they share almost the same configuration. Even more, if
I import ‘shared’ in electron/main.ts, it will cause error:
[vite]: Rollup failed to resolve import "shared/utils" from "/home/bluven/Workspace/web/learn-vite-electron/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`
What’s causing the difference?