Usage of electron-store in Renderer Processes

[JiahuiChen99]

Greetings, I need some help :pray: I've been trying to implement some data persistance using electron-store. But somehow, when I import it in the renderer process, the compilation keeps failing and throwing errors. I'm using VueJS.

The error messages

Module not found: Error: Can't resolve 'path'  ...
Module not found: Error: Can't resolve 'fs' ...
Module not found: Error: Can't resolve 'crypto' ...

config.js which is located in src folder.

const Store = require('electron-store');

const schema = {
    general: {
        type: 'object',
        properties: {
            gpu: { type: 'boolean' },
            openOnStartup: { type: 'boolean' },
            tray: { type: 'boolean' },
        },
        default: {
            gpu: true,
            openOnStartup: false,
            tray: true,
        }
    },
    theme: {
        type: 'object',
        properties: {
            modes: {
                type: 'string',
                enum: ['dark', 'light', 'system'],
                default: 'dark',
            },
            themes: {
                type: 'object',
                properties: {
                    name: { type: 'string'},
                    colours: {
                        type: 'array',
                        items: {
                            type: 'string'
                        },
                        // TODO: Add default theme
                        default: [],
                    }
                }
            }
        }
    }
};

const config = new Store({schema});

export default config;

<script>
      import config from "/src/config";
      console.log(config.get('general'))
</script>

Importing it only into the main process works fine. But the adding it to a renderer process from a vue component throws those errors mentioned above.

package.json dependencies

"dependencies": {
      "electron": "^15.3.1",
      "electron-store": "^8.0.1",
}

Tried to follow the same configuration as Caprine's config but I still get the same errors.

[1923998238]

you need to use ipcrenderer . process ipcRenderer

[JiahuiChen99]

you need to use ipcrenderer . process ipcRenderer

I haven't tried with ipcrenderer yet, but I'd still prefer to import and use the store instead. It should work either way as stated here 🔽 https://github.com/sindresorhus/electron-store#how-do-i-get-store-values-in-the-renderer-process-when-my-store-was-initialized-in-the-main-process

[1923998238]

你需要使用 ipcrenderer 。处理 ipcRenderer

我还没有尝试使用 ipcrenderer，但我仍然更喜欢导入和使用商店。它应该按照此处所述的任何一种方式工作🔽 https://github.com/sindresorhus/electron-store#how-do-i-get-store-values-in-the-renderer-process-when-my-store-was-initialized-in-the-main-过程

Persistent storage needs to access your hard disk. You can't access your hard disk directly in the rendering process, so the build will report an error

[JiahuiChen99]

Thank you @1923998238 for the clarification! ^.^

[1923998238]

谢谢@1923998238的澄清！

It's nothing (^ω^)

[itsgoofer]

You literally documented you can use it in the renderer process here: https://github.com/sindresorhus/electron-store#initrenderer

[JiahuiChen99]

I think that's the usage if you create the Electron Store instance in the renderer process. I guess that if you create it in the main process, you'll have to comunicate with it through ipc, which was my case.

const Store = require('electron-store');

// THIS IS THE INICIALITZATION IN THE RENDERER
const store = new Store();

store.set('unicorn', '🦄');
console.log(store.get('unicorn'));
//=> '🦄'

[aza547]

Hi, I'm also seeing this same issue. I've followed the tutorial linked above and am using the electron-react-boilerplate framework.

In my main process I have:

const Store = require('electron-store');
Store.initRenderer();

and in my renderer:

const Store = require('electron-store');
const store = new Store();

When loading my app I hit the error:

Module not found: Can't resolve 'fs' in 'D:\checkouts\wow-recorder\node_modules\atomically\dist\utils'
node_modules/atomically/dist/utils/fs.js

I'm using version 8.0.1 with electron 18.0.1. Is there a solution? Thanks

[aza547]

I suppose the obvious solution is write the IPC event handling myself in my app to pass data back to the main process and save it there, but my guess is that is what is included in this package that I could benefit from if I was not seeing this error?

[JiahuiChen99]

@alexanderkershaw The documentation is misleading. It is not possible to access to the file system from the renderer process due to security reasons. Hence, you can't use require. The workaround is through IPC from the renderer to the main process. This library handles persistence storage, saving and loading the data is straighforward.

[aza547]

I see. I'll work around it then. Thanks for the reply!