Window custom types being lost upon being used in the renderer folder

[lucasfrsi]

I'm currently working on a monorepo and I've been having issues with types that I can't find a solution at all. First that I'm not using the unplugin-auto-expose library, I'm actually using the contextBridge.exposeInMainWorld() method.

preload/src/index.ts

import { contextBridge } from 'electron';
import { sha256sum } from 'nodeCrypto';
import { versions } from 'versions';

const API = {
  versions,
  sha256sum,
};

contextBridge.exposeInMainWorld('api', API);

export type API = typeof API;

preload/types/preload.d.ts

import type { API } from '../src/index';

declare global {
  interface Window {
    api: API;
    test: number;
  }
}

renderer/tsconfig.json

{
  "extends": "tsconfig/react.json",
  "compilerOptions": {
    "baseUrl": "./src"
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx",
    "../../types/**/*.d.ts",
    "../preload/types/**/*.d.ts" // <-- added this
  ]
}

renderer/src/components/ElectronVersions.tsx

export const ElectronVersions = () => {
  console.log(window.api.versions); // <-- versions is of type any

  return <ul>{window.test}</ul>; // <-- test is of type number
};

First and foremost, everything is working, both in dev and during build. The issue I have is that for some reason the API type is being lost when I use the window object in the renderer folder. Does anybody have any idea why that could be happening? The auto completion works, but the types for the API values are of any, but for some reason test shows as number.

[cawa-93]

In my opinion thats is: API contains version, version is NodeJS.process.version but, NodeJS.process.version doesn't exist in renderer type-space and can't be resolved. Try add compilerOptions.types: ["node"] into renderer/tsconfig.json.
Or check this proejct state: https://github.com/cawa-93/vite-electron-builder/tree/d002d6f2267418407d173e538e3792e012a67415

[lucasfrsi]

Thanks for the quick answer! Apparently the API was conflicting with itself, due to the same name... 🤦🏻‍♂️🤡

The code below worked for me:

import { contextBridge } from 'electron';
import { sha256sum } from './nodeCrypto';
import { versions } from './versions';

const API = {
  versions,
  sha256sum,
};

contextBridge.exposeInMainWorld('api', API);

export type ExposedAPI = typeof API;

import type { ExposedAPI } from '../src/index';

declare global {
  interface Window {
    api: ExposedAPI;
  }
}

[lucasfrsi]

Renaming the API and its type fixed the issue. See this.