Electron Shows an error when import the preload.js part of the module

[Muhammad-Taif-Khan]

Error

Showing the following error when importing the preload part of the module.
Error: module not found: custom-electron-titlebar at preloadRequire

Expected behavior

There preload.js part of the 'custom-electron-titlebar' should work without causing any err.

CODE[preload.js]

const {Titlebar,Color} = require('custom-electron-titlebar');

window.addEventListener('DOMContentLoaded', () => {
    new Titlebar({
            backgroundColor: Color.fromHex("#388e3c"),
            itemBackgroundColor: Color.fromHex("#121212"),
            svgColor: Color.WHITE,
            //menu: null // = do not automatically use Menu.applicationMenu
          
    });
});

Desktop

• OS: WINDOWS 10
• Electron version "^20.1.4"
• Node Version "16"

@AlexTorresSk is this is because the new 20 update of electronjs?
As there any work around to solve this problem?

[leytonoday]

@Muhammad-Taif-Khan Do you have a solution to this issue yet? Seems as if the code in the preload is making my electron app crash

[leytonoday]

Rather than waiting for this issue to be resolved by the repository owner, I wrote my own code to make the titlebar. It's actually relatively easy. The following link is my React component for a titlebar: https://github.com/leytonoday/Clipboard-TTS/blob/main/src/renderer/components/titlebar/Titlebar.tsx My titlebar doesn't have any menu, but I don't imagine that it'll be hard to implement a system for that.

…

On Tue, 27 Sept 2022 at 10:33, Muhammad Taif Khan ***@***.***> wrote: @Muhammad-Taif-Khan <https://github.com/Muhammad-Taif-Khan> Do you have a solution to this issue yet? Seems as if the code in the preload is making my electron app crash @leytonoday <https://github.com/leytonoday> The issue is caused by importing the fs module in the titlebar.ts file of the custom-electron-titlebar. In the new electron update, the preload.js file is sandboxed by default which means we can not import node js modules or any other module that uses nodejs modules inside them like fs, path, etc. which was the case with titlebar.ts. in order to solve this issue, you will have to remove the fs module from the titlebar.ts or create an IPC event to import it in the main.ts file and then send it back to the titlebar.ts. I was going to create my own pull request to solve this problem but I saw one that was created by someone a week ago. remove fs module from titlebar.ts <#194 (comment)> — Reply to this email directly, view it on GitHub <#195 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AISXUFB7GTIEMXI6BEKPR6DWAK5PVANCNFSM6AAAAAAQQCBHDU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[AlexTorresDev]

Fix on #194