What's the right tsconfig to use with electron-store?

[igorlanko]

If you use electron-store https://github.com/sindresorhus/electron-store out of the box with electron-vite from inside the main process, get/set/delete methods aren't recognized by the type:

Property 'set' does not exist on type 'ElectronStore<StoreType>'

This also seems to be a common issue sindresorhus/electron-store#276, but the author dismissed it by referring to the incorrect tsconfig.json setup. Here's what he considers the correct one: https://github.com/sindresorhus/tsconfig/blob/main/tsconfig.json.

However, for me personally this did not solve the issue, but also broke the module imports. I'm not a TS expert, so I suspect I did something wrong. Here's what I have:

Literally copy-pasted the referred tsconfig:

// tsconfig.json
{
	"compilerOptions": {
		// Disabled because of https://github.com/Microsoft/TypeScript/issues/29172
		// "outDir": "dist",

		"module": "node16",
		"moduleResolution": "node16",
		"moduleDetection": "force",
		"target": "ES2022", // Node.js 18
		"lib": ["DOM", "DOM.Iterable", "ES2022"],
		"resolveJsonModule": false, // ESM doesn't yet support JSON modules.
		"declaration": true,
		"newLine": "lf",
		"stripInternal": true,
		"strict": true,
		"noImplicitReturns": true,
		"noImplicitOverride": true,
		"noUnusedLocals": true,
		"noUnusedParameters": true,
		"noFallthroughCasesInSwitch": true,
		"noUncheckedIndexedAccess": true,
		"noPropertyAccessFromIndexSignature": true,
		"noEmitOnError": true,
		"useDefineForClassFields": true,
		"forceConsistentCasingInFileNames": true,
		"skipLibCheck": true
	}
}

My tsconfig.node.json:

// tsconfig.node.json
{
	"extends": "./tsconfig.json",
	"include": [
		"electron.vite.config.*",
		"src/main/**/*",
		"src/preload/**/*",
		"src/utils/**/*.ts",
		"src/env.d.ts"
	],
	"compilerOptions": {
		"allowImportingTsExtensions": true,
		"composite": true,
		"types": ["node", "electron-vite/node"]
	}
}

And finally package.json:

{
	"name": "test",
	"version": "1.0.0",
	"description": "test",
	"main": "./out/main/index.js",
	"author": "test",
	"homepage": "test",
	"productName": "test",
	"type": "module",
	"scripts": {
		"format": "prettier --plugin prettier-plugin-svelte --write .",
		"lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
		"typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
		"svelte-check": "svelte-check --tsconfig ./tsconfig.json",
		"typecheck": "npm run typecheck:node && npm run svelte-check",
		"start": "electron-vite preview",
		"dev": "electron-vite dev",
		"build": "npm run typecheck && electron-vite build",
		"postinstall": "electron-builder install-app-deps",
		"build:unpack": "npm run build && electron-builder --dir",
		"build:win": "npm run build && electron-builder --win --config",
		"build:mac": "npm run build && electron-builder --mac --config",
		"build:linux": "npm run build && electron-builder --linux --config"
	},
	"dependencies": {
		"@electron-toolkit/preload": "^3.0.0",
		"@electron-toolkit/utils": "^3.0.0",
		"@supabase/supabase-js": "^2.43.4",
		"electron-store": "^10.0.0",
		"electron-updater": "^6.1.7",
		"tailwind-variants": "^0.2.1"
	},
	"devDependencies": {
		"@electron-toolkit/eslint-config-prettier": "^2.0.0",
		"@electron-toolkit/eslint-config-ts": "^1.0.1",
		"@electron-toolkit/tsconfig": "^1.0.1",
		"@sveltejs/vite-plugin-svelte": "^3.0.1",
		"@types/node": "^18.19.9",
		"autoprefixer": "^10.4.19",
		"carbon-icons-svelte": "^12.9.0",
		"electron": "^28.2.0",
		"electron-builder": "^24.9.1",
		"electron-vite": "^2.2.0",
		"eslint": "^8.56.0",
		"eslint-plugin-svelte": "^2.35.1",
		"postcss": "^8.4.38",
		"prettier": "^3.2.4",
		"prettier-plugin-svelte": "^3.1.2",
		"prettier-plugin-tailwindcss": "^0.6.4",
		"svelte": "^4.2.9",
		"svelte-check": "^3.6.3",
		"tailwindcss": "^3.4.4",
		"tslib": "^2.6.2",
		"typescript": "^5.3.3",
		"vite": "^5.0.12"
	}
}

What's the right config for this package to work? Kind of bizzare that every other package recognizes types just fine, but not this one though.

I'd much rather use the default starter configs as I had way less issues with them, other than with the store in the main process during build:

import { safeStorage } from 'electron'
import Store from 'electron-store'

type StoreType = {
	session: string | null
}

const store = new Store<StoreType>()
store.set('session', encryptedSession.toString('base64'))
      ^^^

[alex8088]

Add the following configuration to compilerOptions in tsconfig.node.json

"module": "NodeNext",
"moduleResolution": "NodeNext"

Add the following content to package.json

"type": "module"

But this forces you to use esm and requires you to use elecctron 30 and higher. It is recommended that you use electron-conf, which is another electron-store.

• Minimal and simple
• Read data form disk once, ~100x faster
• Simpler migration strategy
• Safer to use it in Electron renderer (no nodeIntegration)
• Written in TypeScript, and support CommonJS and ESM. For Electron 15.x and higher.

[BrendanC23]

This is a fantastic package and works great. Thanks for building it!

[deadcoder0904]

Thanks, I went with electron-conf. Only had to do a few changes:

1. Replace electron-store with electron-conf/main and changed Store/store to Conf/conf

import { Conf } from 'electron-conf/main'
import type { ProvidersState, SelectionState } from '../types/index'
import { defaultProviders, defaultSelection } from '../shared/defaults'

export const conf = new Conf<{
	providers: ProvidersState
	selection: SelectionState
}>({
	name: 'config',
	defaults: {
		providers: defaultProviders,
		selection: defaultSelection,
	},
})

2. Since .get() doesnt exist in electron-conf, I used conf.store

And TS errors went away. Full mini-project -> https://github.com/deadcoder0904/electron-jotai-selector

[alex8088]

conf.get but not conf.store.get

[deadcoder0904]

@alex8088 why would i do conf.store.get() when i get the same value from conf.store. bdw, both projects worked pretty well. electron-vite is phenomenal.

[agarny]

Just came across this thread while looking for a way to use electron-store with Vite. Well, thanks @alex8088, I was already using electron-vite and now I am also using electron-conf. It just works!

[deadcoder0904]

I use electron-typed-ipc too (that one has a bit of a learning curve but is nice to use)

[agarny]

Thanks, it looks like I really ought to check his different repos! :)

[BrendanC23]

electron-trpc is really nice for type-safe IPC.

[alex8088]

https://github.com/alex8088/electron-toolkit/tree/master/packages/typed-ipc

Type-safe Electron IPC, best practices in TypeScript.

Type checking and intellisense are available both in the main process and the renderer process. Both the listener parameters, handler parameters and return value types can be inspected and sensed, and you will not miss any modifications.

It provide a good development experience. Constrain the IPC registration of the main process and the calling of the renderer process, and avoid low-level errors. At the same time, it maintains the original writing method of IPC, which is more conducive to reading and understanding rather than over-encapsulating Electorn's IPC.