Node Integration in Renderer

Using Node-specific modules in the renderer process isn’t enabled by default for security reasons. Defining their use case in preload scripts is recommended for proper context isolation.

✅ Preload Api - Safe

Define an API endpoint for your Node module use case that gets exposed to the main world via the preload script.

// lib/preload/api.ts

import { ipcRenderer } from 'electron'
import fs from 'fs'

const api = {

  // Existing endpoints definition...

  readPackageJson: () => {
    const file = fs.readFileSync('./package.json', 'utf8')
    return JSON.parse(file)
  },
}

export default api

Then, call the API endpoint in the renderer process (app)

// Returns package.json object
window.api.readPacakgeJson()

⚠️ Node Integration - Unsafe

Note: This is not recommended for security purposes - read more about it

Set nodeIntegration: true and contextIsolation: false inside the webPreferences option when creating the BrowserWindow in lib/main/app.ts.

Then, it should be able use Node modules in the renderer process (app). Just make sure to use require instead of import to load those modules.

import WelcomeKit from '@/lib/welcome/WelcomeKit'
import '../styles/app.css'
import { useEffect } from 'react'
const fs = require('fs')

export default function App() {
  useEffect(() => {
    const file = fs.readFileSync('./package.json', 'utf8')
    console.log(file)
  }, [])
  return <WelcomeKit />
}