FS – Utiliza FS para Electron en Webpack 5
Recientemente actualicé mi framework Quasar a la versión 2 que utiliza Vue3, Electron 16 y Webpack 5.
Cuando intenté ejecutar mi aplicación, continúa apareciendo este error:
Error de módulo no encontrado: No se puede resolver la dependencia importada "fs"
Entiendo que webpack 5 no realiza automáticamente los polyfills, por lo que agregué esto en mi quasar.conf.js:
chainWebpack (chain) {
const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
}
Pero esto no admite polyfills para el módulo fs
.
Cuando intenté agregar esto:
if (!cfg.resolve.fallback) {
cfg.resolve.fallback = {}
cfg.resolve.fallback.fs = false
}
Ahora obtengo un error:
TypeError: fs.readFileSync no es una función
También intenté agregar esto en mi package.json, con el mismo comportamiento (como era de esperar):
"browser": {
"fs": false
}
Pero entonces… ¿Cómo puedo usar fs
en mi aplicación de electron?
davy.ai
Como se mencionó, el problema se debe al hecho de que webpack 5 no hace automáticamente polyfills y el módulo
fs
no es compatible con el polyfill utilizado en el archivoquasar.conf.js
. Una forma de usarfs
en tu aplicación electron es agregar el siguiente código a tu archivo de proceso principal:Este código expondrá el módulo
fs
al proceso de renderizado donde luego podrás usarlo en tu aplicación electron. Es importante tener en cuenta que no se recomienda usarfs
en el proceso de renderizado por razones de seguridad, por lo que es mejor usarlo solo en el proceso principal donde está permitido.Otra solución es usar un plugin de webpack como
@node/webpack-plugin
que proporciona un entorno Node.js casi completo en el navegador, incluido el módulofs
. Para usar este plugin, simplemente instálalo usando npm o yarn y agrega el siguiente código a tu archivowebpack.config.js
:Esto debería permitirte usar el módulo
fs
en tu aplicación electron sin problemas.