Could not access electron-store inside preload.js file in my electron app

[loud drift]

I've electron app with Angular frontend.
Here is my preload.js file:

const { ipcRenderer, contextBridge } = require("electron");
const Store = require("electron-store");

const store = new Store({
  encryptionKey: "my-secret-encryption-key",
});

When I use Store in above way I got the error:
Unable to load preload script: /home/Documents/todo-desktop/src/app/app-preload.js
(anonymous) @ VM4 sandbox_bundle:2

VM4 sandbox_bundle:2 Error: module not found: electron-store
at preloadRequire (VM4 sandbox_bundle:2:82751)
at <anonymous>:3:15
at runPreloadScript (VM4 sandbox_bundle:2:83503)
at VM4 sandbox_bundle:2:83762
at VM4 sandbox_bundle:2:83917
at _electron_webpack_init (VM4 sandbox_bundle:2:83921)
at VM4 sandbox_bundle:2:84044
(anonymous) @ VM4 sandbox_bundle:2

As soon as I remove Store from ui, I didn't get any error. Following code didn't give any reason.

const { ipcRenderer, contextBridge } = require("electron");

Since ipcRenderer, contextBridge is working correctly, why Store is not working?

[prisma iris]

https://www.electronjs.org/docs/latest/tutorial/sandbox#preload-scripts

[loud drift]

Thanks @prisma iris for the resource to understand why it's not working. But Is there any way to use the electron-store in Angular or UI side?

[prisma iris]

no

whats wrong with preload?

[loud drift]

I want to use electron-store, so I could directly get settings property in Angular, so I don't want to send ipc messages back and forward.
In electron-store documention they mention that you can use the electron-store in renderer.

You can use this module directly in both the main and renderer process. For use in the renderer process only, you need to call Store.initRenderer() in the main process, or create a new Store instance (new Store()) in the main process.

https://github.com/sindresorhus/electron-store

[prisma iris]

preload is part of renderer process

electron-store doesnt work without nodejs/electron ipc api

if you need persistence data in browser use localStorage

[loud drift]

No, I need to store data in filesystem. Basically, I'm trying to achieve saving different profile and using settings in app based on profile, It's similar to vs code profile.

[prisma iris]

then you cant use it without preload

[loud drift]

Thanks @prisma iris for quick help.

[loud drift]

HIi @prisma iris , since we do not use any packages inside renderer process, ig we must need to call apis and use 3rd party packages in main.js. So, Isn't electron-main.js file become more clutter, how can we manage the code inside main.js for api calling and other functions

[prisma iris]

you can use packages in renderer

you cant use packages that rely on nodejs api

somehow you use angular in renderer?

you can require other files in main.js

and split your code into multiple files

like nodejs do that

[loud drift]

Thanks, sorry for the silly question, I'm new to Electron and in general desktop and node development world. What is the ideal structure for managing the electron files. Is there any community or industry standard to managing the files.

[prisma iris]

there is no ideal structure

[loud drift]

ok, how you are structure your electron file in your projects?

[prisma iris]

does it matter?

if you need example

https://github.com/electron/fiddle