Electron: Imposible cargar el script de precarga: Resources/app.asar/src/preload.js
Tengo una aplicación de electron que se construye y se ejecuta en desarrollo, pero al empaquetar la aplicación con electron-builder, el script de precarga no se empaqueta en la ubicación correcta.
Este es un problema bien documentado y hay preguntas muy similares aquí y aquí por ejemplo, pero ninguna de las respuestas o soluciones está funcionando en mi caso.
Desde mi archivo electron.js:
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(app.getAppPath(), 'src/preload.js'),
contextIsolation: true,
},
});
// En producción, establezca la ruta del navegador inicial en el paquete local generado
// por el proceso de compilación de Create React App.
// En desarrollo, establezca localhost para permitir la carga entre vivo y en tiempo real.
const appURL = app.isPackaged
? url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true,
})
: 'http://localhost:3000';
mainWindow.loadURL(appURL);
mainWindow.webContents.openDevTools();
}
Mi script de precarga:
const { contextBridge, shell } = require('electron')
contextBridge.exposeInMainWorld(
'electron',
{
openBrowserWindow: (url) => shell.openExternal(url)
}
)
Y mi package.json de la aplicación de electron:
"build": {
"extends": null,
"appId": "com.app",
"productName": "App",
"directories": {
"output": "dist"
},
"mac": {
"target": {
"target": "pkg",
"arch": [
"universal"
]
},
"darkModeSupport": "true",
"extendInfo": "app"
},
"pkg": {
"installLocation": "/Applications",
"overwriteAction": "upgrade"
},
"files": [
"**",
"../app/src/*",
"src/preload.js"
],
"extraResources": [
"../app/src/*",
"src/preload.js"
],
"extraFiles": [
"../app/src/*",
"src/preload.js"
]
}
Arriba he tratado de asegurarme de que el archivo “src/preload.js” se copie de diferentes maneras, pero aún así obtengo el error:
No se puede cargar el script de precarga: …app/Contents/Resources/app.asar/src/preload.js
Error: No se encuentra el módulo ‘…app/Contents/Resources/app.asar/src/preload.js’
El script de precarga es en realidad copiado, pero no es parte del archivo app.asar. Se copia en una carpeta src fuera de la carpeta de Recursos que contiene el archivo app.asar:
¿Cómo configuro correctamente electron-builder para que este archivo esté en la ubicación correcta y se pueda acceder en tiempo de ejecución de paquete?
davy.ai
El problema aquí es que el script de precarga está siendo copiado en la ubicación incorrecta y no se incluye en el archivo app.asar. Para solucionarlo, necesitas actualizar la configuración de electron-builder en tu archivo package.json para especificar los archivos correctos a incluir y cómo incluirlos.
Para incluir el script de precarga en el archivo app.asar, necesitas agregar un archivo a la sección “extraResources” de tu configuración de electron-builder que especifique la ruta a preload.js.
Esto asegurará que preload.js se incluya en el archivo app.asar y pueda ser accedido en tiempo de ejecución.
Además, para asegurarte de que el archivo preload.js sea empaquetado en la ubicación correcta, necesitas actualizar tu archivo electron.js para utilizar app.getAppPath() en lugar de __dirname al especificar la ruta a preload.js. Esto asegurará que la ruta sea correcta tanto en el desarrollo como en el empaquetado:
Con estos cambios, tu aplicación electron ahora se debería empaquetar y ejecutar correctamente con electron-builder, incluyendo el archivo preload.js en la ubicación correcta en el archivo app.asar.