0
220
ViewsFalla la importación ES6 de módulos de electrones con Vite/Vue
Estoy tratando de usar electron con el último Vite 2/Vue 3. He configurado dos versiones del archivo principal de electron para poder probar y trabajar tanto con el servidor de desarrollo como con la compilación:
- versión dev cargando localhost:3000 (desde npm run dev ) con loadURL
- otra versión cargando la versión compilada (desde npm run build ) desde la carpeta dist con loadFile
He configurado en las nuevas opciones de BrowserWindow:
webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true, preload: path.join(app.getAppPath(), 'electron.preload.js') }La aplicación se inicia bien en Electron, tanto en la versión de desarrollo como en la de compilación, carga todos los activos y sin ningún error de seguridad. Sin embargo, cuando trato de importar cualquier módulo de 'electron' en mi proyecto, por ejemplo:
import electron from 'electron';me sale el error:
Uncaught TypeError: path.join is not a function at node_modules/electron/index.js (index.js:4)Traté de verificar la ruta y el __dirname para ver si funcionan en mi proyecto:
import * as path from 'path'; console.log(path); console.log(path.join); console.log(__dirname);Y estos rastrean lo siguiente en el panel de desarrollo de Electron:
Si trato de importar la ruta de manera diferente:
import path from 'path' console.log(path); console.log(path.join);Obtengo el siguiente resultado:
En cualquier caso, path.join no está definido. Y ahora estoy bastante atascado en cómo continuar.
También puedo agregar que quiero usar fs-extra, pero esto también falla:
import fs from 'fs-extra'; 
[Editar: agregó la precarga en webPreferences]
1 answers
Answer question0
Creo que Vite transforma mucho las cosas entre bastidores. Afortunadamente @electron/remote proporciona una forma alternativa de buscar cosas:
electron.js :
const { app, BrowserWindow } = require("electron"); const Remote = require("@electron/remote/main"); Remote.initialize(); // ... app.on("ready", () => { mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true, enableRemoteModule: true, contextIsolation: false, }, }); Remote.enable(mainWindow.webContents); mainWindow.loadFile(path.resolve("./dist", "index.html")); }); // ... Component.tsx :
import type { BrowserWindow } from "electron"; const Component: React.FC = () => { const app = window.require("@electron/remote"); const win: BrowserWindow = app.getCurrentWindow(); // ... }No estoy seguro si esta es la mejor solución, pero me funciona con Vite + Electron + React.