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!