Can't use electron store in webpack TS template

[yosle]

Prerequisites

• [ x] Using npm
• [x ] Using an up-to-date main branch
• [ x] Using latest version of devtools. Check the docs for how to update
• [ x] Tried solutions mentioned in #400
• [ x] For issue in production release, add devtools output of DEBUG_PROD=true npm run build && npm start

Expected Behavior

When instantiating a new Store in main.ts , get and set method should be available.

Current Behavior

the only method available is store.openInEditor

Steps to Reproduce

1 - Install the boilerplate template for TS.

Part of my preload.ts:

const electronHandler = {
  ipcRenderer: {
    sendMessage(channel: Channels, ...args: unknown[]) {
      ipcRenderer.send(channel, ...args);
    },
    on(channel: Channels, func: (...args: unknown[]) => void) {
      const subscription = (_event: IpcRendererEvent, ...args: unknown[]) =>
        func(...args);
      ipcRenderer.on(channel, subscription);

      return () => {
        ipcRenderer.removeListener(channel, subscription);
      };
    },
    once(channel: Channels, func: (...args: unknown[]) => void) {
      ipcRenderer.once(channel, (_event, ...args) => func(...args));
    },
  },
  electronStore: {
    get(key: string) {
      return ipcRenderer.sendSync('electron-store-get', key);
    },
    set(property: string, val: string) {
      ipcRenderer.send('electron-store-set', property, val);
    },
  },
};

contextBridge.exposeInMainWorld('electron', electronHandler);

export type ElectronHandler = typeof electronHandler;

This is the preload.d.ts:

declare global {
  // eslint-disable-next-line no-unused-vars
  interface Window {
    electron: ElectronHandler;
    electronStore: {
      get: (key: string) => any;
      set: (key: string, val: any) => void;
      // any other methods you've defined...
    };
  }
}

Part of main.ts:

type StoreType = {
  isRainbow: boolean;
  unicorn?: string;
};

const store = new Store()<StoreType>;
....

ipcMain.on('ipc-example', async (event, key, val) => {
  store.set(key, val);
  // Property 'set' does not exist on type 'ElectronStore<Record<string, unknown>>'
});

Context

I'm unable to use electron-store in this project

Your Environment

• Node version : 20.12.2
• electron-react-boilerplate version or branch : amin TS template
• Operating System and version : Ubuntu Linux 20.04
• Link to your project :

[egegungordu]

According to this issue, you can fix this by changing your module to NodeNext.

Changes I did in my project to fix this issue:

tsconfig.json

{
  "compilerOptions": {
    "module": "NodeNext"
  }
}

.erb/configs/webpack.config.base.ts

const configuration: webpack.Configuration = {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
            compilerOptions: {
              module: 'NodeNext', // this line
            },
          },
        },
      },
    ],
  },
}

And you will have to dynamically import electron-store with this config.

in your main.ts

(async () => {
  const Store = (await import('electron-store')).default;
  const store = new Store();
  ipcMain.on('electron-store-get', async (event, val) => {
    event.returnValue = store.get(val);
  });
  ipcMain.on('electron-store-set', async (event, key, val) => {
    store.set(key, val);
  });
})();