How add rollupNodePolyFill to electron.vite.configs - electron

Question

I need excute 'twilio-client' on electron project
import Twilio from 'twilio-client';
// this line broken when run electron-vite preview or builded app version
const device = new Twilio.Device();
device.setup('xyls', {
debug: true
});
console.log(device);
When I run my app with electron-vite preview or after build, I got an error:
Uncaught TypeError: Failed to resolve module specifier "events"
This also happened when it was executed:
electron-vite dev --watch
I added nodePolifill plugins now it works in dev mode, but on preview or build doesn't
The plugin 'rollup-plugin-node-polyfills' doesn't works on build.rollupOptions.plugins
I need help
My electron.vite.configs.ts:
import { resolve, normalize, dirname } from 'path'
import { defineConfig } from 'electron-vite'
import injectProcessEnvPlugin from 'rollup-plugin-inject-process-env'
import tsconfigPathsPlugin from 'vite-tsconfig-paths'
import reactPlugin from '#vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from '#esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '#esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
import { main, resources } from './package.json'
const [nodeModules, devFolder] = normalize(dirname(main)).split(/\/|\\/g)
const devPath = [nodeModules, devFolder].join('/')
const tsconfigPaths = tsconfigPathsPlugin({
projects: [resolve('tsconfig.json')],
})
export default defineConfig({
main: {
plugins: [tsconfigPaths],
build: {
rollupOptions: {
input: {
index: resolve('src/main/index.ts'),
},
output: {
dir: resolve(devPath, 'main'),
},
},
},
},
preload: {
plugins: [tsconfigPaths],
build: {
outDir: resolve(devPath, 'preload'),
},
},
renderer: {
define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.platform': JSON.stringify(process.platform),
},
server: {
port: 4927,
},
publicDir: resolve(resources, 'public'),
plugins: [
tsconfigPaths,
reactPlugin(),
],
resolve: {
alias: {
util: 'rollup-plugin-node-polyfills/polyfills/util',
sys: 'util',
stream: 'rollup-plugin-node-polyfills/polyfills/stream',
path: 'rollup-plugin-node-polyfills/polyfills/path',
querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
url: 'rollup-plugin-node-polyfills/polyfills/url',
string_decoder: 'rollup-plugin-node-polyfills/polyfills/string-decoder',
http: 'rollup-plugin-node-polyfills/polyfills/http',
https: 'rollup-plugin-node-polyfills/polyfills/http',
os: 'rollup-plugin-node-polyfills/polyfills/os',
assert: 'rollup-plugin-node-polyfills/polyfills/assert',
constants: 'rollup-plugin-node-polyfills/polyfills/constants',
_stream_duplex: 'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
_stream_passthrough: 'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
_stream_readable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
_stream_writable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
_stream_transform: 'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
timers: 'rollup-plugin-node-polyfills/polyfills/timers',
console: 'rollup-plugin-node-polyfills/polyfills/console',
vm: 'rollup-plugin-node-polyfills/polyfills/vm',
zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
tty: 'rollup-plugin-node-polyfills/polyfills/tty',
domain: 'rollup-plugin-node-polyfills/polyfills/domain',
events: 'rollup-plugin-node-polyfills/polyfills/events',
buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6', // add buffer
process: 'rollup-plugin-node-polyfills/polyfills/process-es6', // add process
}
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
}),
NodeModulesPolyfillPlugin(),
]
}
},
worker: {
format: "es",
},
build: {
outDir: resolve(devPath, 'renderer'),
rollupOptions: {
plugins: [
injectProcessEnvPlugin({
NODE_ENV: 'production',
platform: process.platform,
}),
rollupNodePolyFill() //this line doesn't works
],
input: {
index: resolve('src/renderer/index.html'),
},
output: {
format: "esm",
dir: resolve(devPath, 'renderer'),
},
},
},
},
})
and the is my project repostitory:
https://github.com/caioregatieri/app-electron
I tried add many polyfills, add twilio import on preload and export to render with
contextBridge.exposeInMainWorld('Twilio', Twilio)

Answer 1

I solved it with:
electron.vite.config.ts
build: {
outDir: resolve(devPath, 'renderer'),
rollupOptions: {
plugins: [
injectProcessEnvPlugin({
NODE_ENV: 'production',
platform: process.platform,
}),
rollupNodePolyFill,
],
},
},
and this:
index.html
<script>
global = globalThis;
</script>