93 files changed, 309 insertions, 294 deletions

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 3d944e4..e76ff6f 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -44,8 +44,9 @@ module.exports = {
     },
   },
   rules: {
-    // TODO Flip this to `ignorePackages` once we are on `nodenext` resolution.
-    'import/extensions': ['error', 'never'],
+    // `import/exteions` is buggy with ts files:
+    // https://github.com/import-js/eslint-plugin-import/issues/2111
+    'import/extensions': 'off',
     'import/no-unresolved': 'error',
     'import/order': [
       'error',
@@ -107,13 +108,6 @@ module.exports = {
       },
     },
     {
-      files: ['**/*.js'],
-      rules: {
-        // ESM requires extensions for imports.
-        'import/extensions': ['error', 'ignorePackages'],
-      },
-    },
-    {
       files: ['**/*.cjs'],
       parserOptions: {
         sourceType: 'script',
diff --git a/config/tsconfig.base.json b/config/tsconfig.base.json
index ff7594e..64522ce 100644
--- a/config/tsconfig.base.json
+++ b/config/tsconfig.base.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "module": "esnext",
-    "target": "esnext",
-    "moduleResolution": "node",
+    "module": "Node16",
+    "target": "es2022",
+    "moduleResolution": "Node16",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
@@ -12,6 +12,6 @@
     "isolatedModules": true,
     "skipLibCheck": true,
     "checkJs": true,
-    "lib": ["esnext"]
+    "lib": ["es2021"]
   }
 }
diff --git a/packages/main/src/i18n/I18nStore.ts b/packages/main/src/i18n/I18nStore.ts
index 8ea4430..4c77322 100644
--- a/packages/main/src/i18n/I18nStore.ts
+++ b/packages/main/src/i18n/I18nStore.ts
@@ -21,7 +21,7 @@
 import type { i18n, ResourceKey, TFunction } from 'i18next';
 import { IAtom, createAtom } from 'mobx';
 
-import getLogger from '../utils/getLogger';
+import getLogger from '../utils/getLogger.js';
 
 const log = getLogger('I18nStore');
 
diff --git a/packages/main/src/i18n/RepositoryBasedI18nBackend.ts b/packages/main/src/i18n/RepositoryBasedI18nBackend.ts
index 23f70d7..5b667d5 100644
--- a/packages/main/src/i18n/RepositoryBasedI18nBackend.ts
+++ b/packages/main/src/i18n/RepositoryBasedI18nBackend.ts
@@ -26,9 +26,9 @@ import type {
 } from 'i18next';
 import { debounce } from 'lodash-es';
 
-import getLogger from '../utils/getLogger';
+import getLogger from '../utils/getLogger.js';
 
-import type LocatlizationRepository from './LocalizationRepository';
+import type LocatlizationRepository from './LocalizationRepository.js';
 
 const MISSING_ENTRIES_DEBOUNCE_TIME_MS = 1000;
 
diff --git a/packages/main/src/i18n/i18nLog.ts b/packages/main/src/i18n/i18nLog.ts
index 308a1cc..94f6473 100644
--- a/packages/main/src/i18n/i18nLog.ts
+++ b/packages/main/src/i18n/i18nLog.ts
@@ -20,7 +20,7 @@
 
 import type { LoggerModule } from 'i18next';
 
-import getLogger from '../utils/getLogger';
+import getLogger from '../utils/getLogger.js';
 
 const log = getLogger('i18nLog');
 
diff --git a/packages/main/src/i18n/impl/LocaltizationFiles.ts b/packages/main/src/i18n/impl/LocaltizationFiles.ts
index 9cd854e..74e3ae3 100644
--- a/packages/main/src/i18n/impl/LocaltizationFiles.ts
+++ b/packages/main/src/i18n/impl/LocaltizationFiles.ts
@@ -22,10 +22,10 @@ import { readFile, writeFile } from 'node:fs/promises';
 
 import type { ResourceKey } from 'i18next';
 
-import type Resources from '../../infrastructure/resources/Resources';
-import getLogger from '../../utils/getLogger';
-import isErrno from '../../utils/isErrno';
-import type LocatlizationRepository from '../LocalizationRepository';
+import type Resources from '../../infrastructure/resources/Resources.js';
+import getLogger from '../../utils/getLogger.js';
+import isErrno from '../../utils/isErrno.js';
+import type LocatlizationRepository from '../LocalizationRepository.js';
 
 const log = getLogger('LocalizationFiles');
 
diff --git a/packages/main/src/i18n/loadLocalization.ts b/packages/main/src/i18n/loadLocalization.ts
index e62b3e3..19da9e2 100644
--- a/packages/main/src/i18n/loadLocalization.ts
+++ b/packages/main/src/i18n/loadLocalization.ts
@@ -23,13 +23,13 @@ import i18next, { i18n } from 'i18next';
 import { reaction } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 
-import type MainStore from '../stores/MainStore';
-import getLogger from '../utils/getLogger';
+import type MainStore from '../stores/MainStore.js';
+import getLogger from '../utils/getLogger.js';
 
-import I18nStore from './I18nStore';
-import type LocatlizationRepository from './LocalizationRepository';
-import RepositoryBasedI18nBackend from './RepositoryBasedI18nBackend';
-import i18nLog from './i18nLog';
+import I18nStore from './I18nStore.js';
+import type LocatlizationRepository from './LocalizationRepository.js';
+import RepositoryBasedI18nBackend from './RepositoryBasedI18nBackend.js';
+import i18nLog from './i18nLog.js';
 
 const log = getLogger('loadLocationzation');
 
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index 3494f25..3496212 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -23,11 +23,11 @@ import os from 'node:os';
 
 import { app } from 'electron';
 
-import { enableStacktraceSourceMaps } from './infrastructure/electron/impl/devTools';
-import electronShell from './infrastructure/electron/impl/electronShell';
-import initReactions from './initReactions';
-import MainStore from './stores/MainStore';
-import getLogger from './utils/getLogger';
+import { enableStacktraceSourceMaps } from './infrastructure/electron/impl/devTools.js';
+import electronShell from './infrastructure/electron/impl/electronShell.js';
+import initReactions from './initReactions.js';
+import MainStore from './stores/MainStore.js';
+import getLogger from './utils/getLogger.js';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
diff --git a/packages/main/src/infrastructure/config/ConfigRepository.ts b/packages/main/src/infrastructure/config/ConfigRepository.ts
index 67bffb0..7d5e12b 100644
--- a/packages/main/src/infrastructure/config/ConfigRepository.ts
+++ b/packages/main/src/infrastructure/config/ConfigRepository.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type Disposer from '../../utils/Disposer';
+import type Disposer from '../../utils/Disposer.js';
 
 export type ReadConfigResult =
   | { found: true; contents: string }
diff --git a/packages/main/src/infrastructure/config/impl/ConfigFile.ts b/packages/main/src/infrastructure/config/impl/ConfigFile.ts
index 6203c89..684a827 100644
--- a/packages/main/src/infrastructure/config/impl/ConfigFile.ts
+++ b/packages/main/src/infrastructure/config/impl/ConfigFile.ts
@@ -24,11 +24,11 @@ import path from 'node:path';
 
 import { throttle } from 'lodash-es';
 
-import type Disposer from '../../../utils/Disposer';
-import getLogger from '../../../utils/getLogger';
-import isErrno from '../../../utils/isErrno';
-import type ConfigRepository from '../ConfigRepository';
-import type { ReadConfigResult } from '../ConfigRepository';
+import type Disposer from '../../../utils/Disposer.js';
+import getLogger from '../../../utils/getLogger.js';
+import isErrno from '../../../utils/isErrno.js';
+import type ConfigRepository from '../ConfigRepository.js';
+import type { ReadConfigResult } from '../ConfigRepository.js';
 
 const log = getLogger('ConfigFile');
 
diff --git a/packages/main/src/infrastructure/electron/RendererBridge.ts b/packages/main/src/infrastructure/electron/RendererBridge.ts
index 097580a..921f09a 100644
--- a/packages/main/src/infrastructure/electron/RendererBridge.ts
+++ b/packages/main/src/infrastructure/electron/RendererBridge.ts
@@ -26,8 +26,8 @@ import {
   onPatch,
 } from 'mobx-state-tree';
 
-import type MainStore from '../../stores/MainStore';
-import Disposer from '../../utils/Disposer';
+import type MainStore from '../../stores/MainStore.js';
+import Disposer from '../../utils/Disposer.js';
 
 export type PatchListener = (patch: IJsonPatch[]) => void;
 
diff --git a/packages/main/src/infrastructure/electron/__tests__/RendererBridge.test.ts b/packages/main/src/infrastructure/electron/__tests__/RendererBridge.test.ts
index b7c8a76..e29429d 100644
--- a/packages/main/src/infrastructure/electron/__tests__/RendererBridge.test.ts
+++ b/packages/main/src/infrastructure/electron/__tests__/RendererBridge.test.ts
@@ -30,8 +30,8 @@ import {
   unprotect,
 } from 'mobx-state-tree';
 
-import MainStore from '../../../stores/MainStore';
-import RendererBridge, { type PatchListener } from '../RendererBridge';
+import MainStore from '../../../stores/MainStore.js';
+import RendererBridge, { type PatchListener } from '../RendererBridge.js';
 
 const TestStore = MainStore.actions((theSelf) => ({
   /**
diff --git a/packages/main/src/infrastructure/electron/__tests__/UserAgents.test.ts b/packages/main/src/infrastructure/electron/__tests__/UserAgents.test.ts
index d963704..0c6dd1c 100644
--- a/packages/main/src/infrastructure/electron/__tests__/UserAgents.test.ts
+++ b/packages/main/src/infrastructure/electron/__tests__/UserAgents.test.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import UserAgents from '../UserAgents';
+import UserAgents from '../UserAgents.js';
 
 let userAgents: UserAgents;
 
diff --git a/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts b/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
index 20a1f70..c4b3823 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
@@ -27,15 +27,15 @@ import {
 import { BrowserWindow, ipcMain, IpcMainEvent } from 'electron';
 import type { IJsonPatch } from 'mobx-state-tree';
 
-import type MainStore from '../../../stores/MainStore';
-import getLogger from '../../../utils/getLogger';
-import RendererBridge from '../RendererBridge';
-import type { MainWindow, ServiceView } from '../types';
-
-import ElectronServiceView from './ElectronServiceView';
-import type ElectronViewFactory from './ElectronViewFactory';
-import { openDevToolsWhenReady } from './devTools';
-import lockWebContentsToFile from './lockWebContentsToFile';
+import type MainStore from '../../../stores/MainStore.js';
+import getLogger from '../../../utils/getLogger.js';
+import RendererBridge from '../RendererBridge.js';
+import type { MainWindow, ServiceView } from '../types.js';
+
+import ElectronServiceView from './ElectronServiceView.js';
+import type ElectronViewFactory from './ElectronViewFactory.js';
+import { openDevToolsWhenReady } from './devTools.js';
+import lockWebContentsToFile from './lockWebContentsToFile.js';
 
 const log = getLogger('ElectronMainWindow');
 
diff --git a/packages/main/src/infrastructure/electron/impl/ElectronPartition.ts b/packages/main/src/infrastructure/electron/impl/ElectronPartition.ts
index e60ce21..d1220c5 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronPartition.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronPartition.ts
@@ -20,10 +20,10 @@
 
 import { Session, session } from 'electron';
 
-import type Profile from '../../../stores/Profile';
-import type { Partition } from '../types';
+import type Profile from '../../../stores/Profile.js';
+import type { Partition } from '../types.js';
 
-import type ElectronViewFactory from './ElectronViewFactory';
+import type ElectronViewFactory from './ElectronViewFactory.js';
 
 export default class ElectronPartition implements Partition {
   readonly id: string;
diff --git a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
index a9298bd..91247c8 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
@@ -20,13 +20,13 @@
 
 import { BrowserView } from 'electron';
 
-import type Service from '../../../stores/Service';
-import getLogger from '../../../utils/getLogger';
-import type Resources from '../../resources/Resources';
-import type { ServiceView } from '../types';
+import type Service from '../../../stores/Service.js';
+import getLogger from '../../../utils/getLogger.js';
+import type Resources from '../../resources/Resources.js';
+import type { ServiceView } from '../types.js';
 
-import ElectronPartition from './ElectronPartition';
-import type ElectronViewFactory from './ElectronViewFactory';
+import ElectronPartition from './ElectronPartition.js';
+import type ElectronViewFactory from './ElectronViewFactory.js';
 
 const log = getLogger('ElectronServiceView');
 
diff --git a/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts b/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts
index c72860d..df3de85 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts
@@ -18,16 +18,21 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type MainStore from '../../../stores/MainStore';
-import type Profile from '../../../stores/Profile';
-import type Service from '../../../stores/Service';
-import type Resources from '../../resources/Resources';
-import type UserAgents from '../UserAgents';
-import type { MainWindow, Partition, ServiceView, ViewFactory } from '../types';
+import type MainStore from '../../../stores/MainStore.js';
+import type Profile from '../../../stores/Profile.js';
+import type Service from '../../../stores/Service.js';
+import type Resources from '../../resources/Resources.js';
+import type UserAgents from '../UserAgents.js';
+import type {
+  MainWindow,
+  Partition,
+  ServiceView,
+  ViewFactory,
+} from '../types.js';
 
-import ElectronMainWindow from './ElectronMainWindow';
-import ElectronPartition from './ElectronPartition';
-import ElectronServiceView from './ElectronServiceView';
+import ElectronMainWindow from './ElectronMainWindow.js';
+import ElectronPartition from './ElectronPartition.js';
+import ElectronServiceView from './ElectronServiceView.js';
 
 export default class ElectronViewFactory implements ViewFactory {
   private readonly webContentsIdToServiceView = new Map<
diff --git a/packages/main/src/infrastructure/electron/impl/__tests__/electron.integ.test.ts b/packages/main/src/infrastructure/electron/impl/__tests__/electron.integ.test.ts
index 67cf689..75b12ac 100644
--- a/packages/main/src/infrastructure/electron/impl/__tests__/electron.integ.test.ts
+++ b/packages/main/src/infrastructure/electron/impl/__tests__/electron.integ.test.ts
@@ -1,6 +1,6 @@
 import { BrowserWindow } from 'electron';
 
-import '../ElectronMainWindow';
+import '../ElectronMainWindow.js';
 
 test('create a BrowserWindow', async () => {
   const w = new BrowserWindow();
diff --git a/packages/main/src/infrastructure/electron/impl/__tests__/hardenSession.test.ts b/packages/main/src/infrastructure/electron/impl/__tests__/hardenSession.test.ts
index 7b70d10..bbbd675 100644
--- a/packages/main/src/infrastructure/electron/impl/__tests__/hardenSession.test.ts
+++ b/packages/main/src/infrastructure/electron/impl/__tests__/hardenSession.test.ts
@@ -30,8 +30,8 @@ import type {
   WebContents,
 } from 'electron';
 
-import type Resources from '../../../resources/Resources';
-import hardenSession from '../hardenSession';
+import type Resources from '../../../resources/Resources.js';
+import hardenSession from '../hardenSession.js';
 
 const permissions = [
   'clipboard-read',
diff --git a/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.test.ts b/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.test.ts
index 47525d3..6332db7 100644
--- a/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.test.ts
+++ b/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.test.ts
@@ -25,8 +25,8 @@ import { fake } from '@sophie/test-utils';
 import type { Event, HandlerDetails, WebContents } from 'electron';
 import { mocked } from 'jest-mock';
 
-import type Resources from '../../../resources/Resources';
-import lockWebContentsToFile from '../lockWebContentsToFile';
+import type Resources from '../../../resources/Resources.js';
+import lockWebContentsToFile from '../lockWebContentsToFile.js';
 
 type WillNavigateHandler = (event: Event, url: string) => void;
 
diff --git a/packages/main/src/infrastructure/electron/impl/electronShell.ts b/packages/main/src/infrastructure/electron/impl/electronShell.ts
index f7f7001..da246c0 100644
--- a/packages/main/src/infrastructure/electron/impl/electronShell.ts
+++ b/packages/main/src/infrastructure/electron/impl/electronShell.ts
@@ -23,7 +23,7 @@ import { writeFile } from 'node:fs/promises';
 import { app, dialog, shell } from 'electron';
 import { getLogger } from 'loglevel';
 
-import type MainEnv from '../../../stores/MainEnv';
+import type MainEnv from '../../../stores/MainEnv.js';
 
 const log = getLogger('ElectronShell');
 
diff --git a/packages/main/src/infrastructure/electron/impl/hardenSession.ts b/packages/main/src/infrastructure/electron/impl/hardenSession.ts
index fc358a1..0574146 100644
--- a/packages/main/src/infrastructure/electron/impl/hardenSession.ts
+++ b/packages/main/src/infrastructure/electron/impl/hardenSession.ts
@@ -22,8 +22,8 @@ import { URL } from 'node:url';
 
 import type { Session } from 'electron';
 
-import getLogger from '../../../utils/getLogger';
-import type Resources from '../../resources/Resources';
+import getLogger from '../../../utils/getLogger.js';
+import type Resources from '../../resources/Resources.js';
 
 /**
  * URL prefixes Sophie is allowed load in dev mode.
diff --git a/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts b/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts
index da40a56..338c845 100644
--- a/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts
+++ b/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts
@@ -20,9 +20,9 @@
 
 import type { WebContents } from 'electron';
 
-import getLogger from '../../../utils/getLogger';
-import isErrno from '../../../utils/isErrno';
-import type Resources from '../../resources/Resources';
+import getLogger from '../../../utils/getLogger.js';
+import isErrno from '../../../utils/isErrno.js';
+import type Resources from '../../resources/Resources.js';
 
 const log = getLogger('lockWebContentsToFile');
 
diff --git a/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
index 32b2d4d..7e45401 100644
--- a/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
+++ b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
@@ -22,7 +22,7 @@ import { Menu, MenuItemConstructorOptions } from 'electron';
 import { autorun } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 
-import type MainStore from '../../../stores/MainStore';
+import type MainStore from '../../../stores/MainStore.js';
 
 export default function setApplicationMenu(
   store: MainStore,
diff --git a/packages/main/src/infrastructure/electron/types.ts b/packages/main/src/infrastructure/electron/types.ts
index 92ca9ad..608a342 100644
--- a/packages/main/src/infrastructure/electron/types.ts
+++ b/packages/main/src/infrastructure/electron/types.ts
@@ -18,9 +18,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type MainStore from '../../stores/MainStore';
-import type Profile from '../../stores/Profile';
-import type Service from '../../stores/Service';
+import type MainStore from '../../stores/MainStore.js';
+import type Profile from '../../stores/Profile.js';
+import type Service from '../../stores/Service.js';
 
 export interface ViewFactory {
   createMainWindow(store: MainStore): Promise<MainWindow>;
diff --git a/packages/main/src/infrastructure/resources/impl/__tests__/getDistResources.test.ts b/packages/main/src/infrastructure/resources/impl/__tests__/getDistResources.test.ts
index 649536b..c7c6e22 100644
--- a/packages/main/src/infrastructure/resources/impl/__tests__/getDistResources.test.ts
+++ b/packages/main/src/infrastructure/resources/impl/__tests__/getDistResources.test.ts
@@ -20,8 +20,8 @@
 
 import os from 'node:os';
 
-import Resources from '../../Resources';
-import getDistResources from '../getDistResources';
+import Resources from '../../Resources.js';
+import getDistResources from '../getDistResources.js';
 
 const defaultDevServerURL = 'http://localhost:3000/';
 
diff --git a/packages/main/src/infrastructure/resources/impl/getDistResources.ts b/packages/main/src/infrastructure/resources/impl/getDistResources.ts
index 3c1ffb3..3b7827c 100644
--- a/packages/main/src/infrastructure/resources/impl/getDistResources.ts
+++ b/packages/main/src/infrastructure/resources/impl/getDistResources.ts
@@ -21,7 +21,7 @@
 import path from 'node:path';
 import { pathToFileURL, URL } from 'node:url';
 
-import Resources from '../Resources';
+import Resources from '../Resources.js';
 
 export default function getDistResources(
   devMode: boolean,
diff --git a/packages/main/src/initReactions.ts b/packages/main/src/initReactions.ts
index 05bc205..cbc0265 100644
--- a/packages/main/src/initReactions.ts
+++ b/packages/main/src/initReactions.ts
@@ -20,20 +20,20 @@
 
 import { app, session } from 'electron';
 
-import LocalizationFiles from './i18n/impl/LocaltizationFiles';
-import loadLocalization from './i18n/loadLocalization';
-import ConfigFile from './infrastructure/config/impl/ConfigFile';
-import UserAgents from './infrastructure/electron/UserAgents';
-import ElectronViewFactory from './infrastructure/electron/impl/ElectronViewFactory';
-import { installDevToolsExtensions } from './infrastructure/electron/impl/devTools';
-import hardenSession from './infrastructure/electron/impl/hardenSession';
-import setApplicationMenu from './infrastructure/electron/impl/setApplicationMenu';
-import getDistResources from './infrastructure/resources/impl/getDistResources';
-import loadServices from './reactions/loadServices';
-import synchronizeConfig from './reactions/synchronizeConfig';
-import synchronizeNativeTheme from './reactions/synchronizeNativeTheme';
-import type MainStore from './stores/MainStore';
-import type Disposer from './utils/Disposer';
+import LocalizationFiles from './i18n/impl/LocaltizationFiles.js';
+import loadLocalization from './i18n/loadLocalization.js';
+import ConfigFile from './infrastructure/config/impl/ConfigFile.js';
+import UserAgents from './infrastructure/electron/UserAgents.js';
+import ElectronViewFactory from './infrastructure/electron/impl/ElectronViewFactory.js';
+import { installDevToolsExtensions } from './infrastructure/electron/impl/devTools.js';
+import hardenSession from './infrastructure/electron/impl/hardenSession.js';
+import setApplicationMenu from './infrastructure/electron/impl/setApplicationMenu.js';
+import getDistResources from './infrastructure/resources/impl/getDistResources.js';
+import loadServices from './reactions/loadServices.js';
+import synchronizeConfig from './reactions/synchronizeConfig.js';
+import synchronizeNativeTheme from './reactions/synchronizeNativeTheme.js';
+import type MainStore from './stores/MainStore.js';
+import type Disposer from './utils/Disposer.js';
 
 export default async function initReactions(
   store: MainStore,
diff --git a/packages/main/src/reactions/__tests__/synchronizeConfig.test.ts b/packages/main/src/reactions/__tests__/synchronizeConfig.test.ts
index f0e88c1..d4d8abf 100644
--- a/packages/main/src/reactions/__tests__/synchronizeConfig.test.ts
+++ b/packages/main/src/reactions/__tests__/synchronizeConfig.test.ts
@@ -21,10 +21,10 @@
 import { jest } from '@jest/globals';
 import { mocked } from 'jest-mock';
 
-import type ConfigRepository from '../../infrastructure/config/ConfigRepository';
-import SharedStore from '../../stores/SharedStore';
-import type Disposer from '../../utils/Disposer';
-import synchronizeConfig, { serializeConfig } from '../synchronizeConfig';
+import type ConfigRepository from '../../infrastructure/config/ConfigRepository.js';
+import SharedStore from '../../stores/SharedStore.js';
+import type Disposer from '../../utils/Disposer.js';
+import synchronizeConfig, { serializeConfig } from '../synchronizeConfig.js';
 
 let store: SharedStore;
 const repository: ConfigRepository = {
diff --git a/packages/main/src/reactions/__tests__/synchronizeNativeTheme.test.ts b/packages/main/src/reactions/__tests__/synchronizeNativeTheme.test.ts
index 05f14fb..c89f989 100644
--- a/packages/main/src/reactions/__tests__/synchronizeNativeTheme.test.ts
+++ b/packages/main/src/reactions/__tests__/synchronizeNativeTheme.test.ts
@@ -21,8 +21,8 @@
 import { jest } from '@jest/globals';
 import { mocked } from 'jest-mock';
 
-import SharedStore from '../../stores/SharedStore';
-import type Disposer from '../../utils/Disposer';
+import SharedStore from '../../stores/SharedStore.js';
+import type Disposer from '../../utils/Disposer.js';
 
 let shouldUseDarkColors = false;
 
@@ -39,7 +39,7 @@ jest.unstable_mockModule('electron', () => ({
 
 const { nativeTheme } = await import('electron');
 const { default: synchronizeNativeTheme } = await import(
-  '../synchronizeNativeTheme'
+  '../synchronizeNativeTheme.js'
 );
 
 let store: SharedStore;
diff --git a/packages/main/src/reactions/loadServices.ts b/packages/main/src/reactions/loadServices.ts
index 50fd2cb..1325a36 100644
--- a/packages/main/src/reactions/loadServices.ts
+++ b/packages/main/src/reactions/loadServices.ts
@@ -26,10 +26,10 @@ import type {
   Partition,
   ServiceView,
   ViewFactory,
-} from '../infrastructure/electron/types';
-import type MainStore from '../stores/MainStore';
-import type Service from '../stores/Service';
-import getLogger from '../utils/getLogger';
+} from '../infrastructure/electron/types.js';
+import type MainStore from '../stores/MainStore.js';
+import type Service from '../stores/Service.js';
+import getLogger from '../utils/getLogger.js';
 
 const log = getLogger('loadServices');
 
diff --git a/packages/main/src/reactions/synchronizeConfig.ts b/packages/main/src/reactions/synchronizeConfig.ts
index 5fe924a..f3c8b4a 100644
--- a/packages/main/src/reactions/synchronizeConfig.ts
+++ b/packages/main/src/reactions/synchronizeConfig.ts
@@ -21,11 +21,11 @@
 import { debounce } from 'lodash-es';
 import { reaction } from 'mobx';
 
-import type ConfigRepository from '../infrastructure/config/ConfigRepository';
-import type SharedStore from '../stores/SharedStore';
-import type Config from '../stores/config/Config';
-import type Disposer from '../utils/Disposer';
-import getLogger from '../utils/getLogger';
+import type ConfigRepository from '../infrastructure/config/ConfigRepository.js';
+import type SharedStore from '../stores/SharedStore.js';
+import type Config from '../stores/config/Config.js';
+import type Disposer from '../utils/Disposer.js';
+import getLogger from '../utils/getLogger.js';
 
 const DEFAULT_CONFIG_DEBOUNCE_TIME_MS = 1000;
 
diff --git a/packages/main/src/reactions/synchronizeNativeTheme.ts b/packages/main/src/reactions/synchronizeNativeTheme.ts
index 384d54d..10d5f69 100644
--- a/packages/main/src/reactions/synchronizeNativeTheme.ts
+++ b/packages/main/src/reactions/synchronizeNativeTheme.ts
@@ -21,9 +21,9 @@
 import { nativeTheme } from 'electron';
 import { autorun } from 'mobx';
 
-import type SharedStore from '../stores/SharedStore';
-import type Disposer from '../utils/Disposer';
-import getLogger from '../utils/getLogger';
+import type SharedStore from '../stores/SharedStore.js';
+import type Disposer from '../utils/Disposer.js';
+import getLogger from '../utils/getLogger.js';
 
 const log = getLogger('synchronizeNativeTheme');
 
diff --git a/packages/main/src/stores/GlobalSettings.ts b/packages/main/src/stores/GlobalSettings.ts
index 84248ea..9ebc1b1 100644
--- a/packages/main/src/stores/GlobalSettings.ts
+++ b/packages/main/src/stores/GlobalSettings.ts
@@ -21,9 +21,9 @@
 import { defineGlobalSettingsModel, ThemeSource } from '@sophie/shared';
 import { Instance, resolveIdentifier } from 'mobx-state-tree';
 
-import getLogger from '../utils/getLogger';
+import getLogger from '../utils/getLogger.js';
 
-import Service from './Service';
+import Service from './Service.js';
 
 const log = getLogger('sharedStore');
 
diff --git a/packages/main/src/stores/MainStore.ts b/packages/main/src/stores/MainStore.ts
index b3e2830..1abd20c 100644
--- a/packages/main/src/stores/MainStore.ts
+++ b/packages/main/src/stores/MainStore.ts
@@ -22,16 +22,16 @@ import type { Action } from '@sophie/shared';
 import type { ResourceKey } from 'i18next';
 import { flow, Instance, types } from 'mobx-state-tree';
 
-import type I18nStore from '../i18n/I18nStore';
-import type { UseTranslationResult } from '../i18n/I18nStore';
-import type { MainWindow } from '../infrastructure/electron/types';
-import getLogger from '../utils/getLogger';
+import type I18nStore from '../i18n/I18nStore.js';
+import type { UseTranslationResult } from '../i18n/I18nStore.js';
+import type { MainWindow } from '../infrastructure/electron/types.js';
+import getLogger from '../utils/getLogger.js';
 
-import GlobalSettings from './GlobalSettings';
-import { getEnv } from './MainEnv';
-import Profile from './Profile';
-import Service from './Service';
-import SharedStore from './SharedStore';
+import GlobalSettings from './GlobalSettings.js';
+import { getEnv } from './MainEnv.js';
+import Profile from './Profile.js';
+import Service from './Service.js';
+import SharedStore from './SharedStore.js';
 
 const log = getLogger('MainStore');
 
diff --git a/packages/main/src/stores/Profile.ts b/packages/main/src/stores/Profile.ts
index 405a5d4..b4343a0 100644
--- a/packages/main/src/stores/Profile.ts
+++ b/packages/main/src/stores/Profile.ts
@@ -21,7 +21,7 @@
 import { Certificate, Profile as ProfileBase } from '@sophie/shared';
 import { clone, getSnapshot, Instance } from 'mobx-state-tree';
 
-import type ProfileConfig from './config/ProfileConfig';
+import type ProfileConfig from './config/ProfileConfig.js';
 
 const Profile = ProfileBase.views((self) => ({
   get config(): ProfileConfig {
diff --git a/packages/main/src/stores/Service.ts b/packages/main/src/stores/Service.ts
index 9256f65..3b7d0b2 100644
--- a/packages/main/src/stores/Service.ts
+++ b/packages/main/src/stores/Service.ts
@@ -29,12 +29,12 @@ import {
 } from '@sophie/shared';
 import { type Instance, getSnapshot, cast, flow } from 'mobx-state-tree';
 
-import type { ServiceView } from '../infrastructure/electron/types';
-import getLogger from '../utils/getLogger';
+import type { ServiceView } from '../infrastructure/electron/types.js';
+import getLogger from '../utils/getLogger.js';
 
-import { getEnv } from './MainEnv';
-import ServiceSettings from './ServiceSettings';
-import type ServiceConfig from './config/ServiceConfig';
+import { getEnv } from './MainEnv.js';
+import ServiceSettings from './ServiceSettings.js';
+import type ServiceConfig from './config/ServiceConfig.js';
 
 const log = getLogger('Service');
 
diff --git a/packages/main/src/stores/ServiceSettings.ts b/packages/main/src/stores/ServiceSettings.ts
index 5d37347..d5c2843 100644
--- a/packages/main/src/stores/ServiceSettings.ts
+++ b/packages/main/src/stores/ServiceSettings.ts
@@ -21,7 +21,7 @@
 import { defineServiceSettingsModel } from '@sophie/shared';
 import { Instance } from 'mobx-state-tree';
 
-import Profile from './Profile';
+import Profile from './Profile.js';
 
 const ServiceSettings = defineServiceSettingsModel(Profile);
 
diff --git a/packages/main/src/stores/SharedStore.ts b/packages/main/src/stores/SharedStore.ts
index f93c3d4..e1c2d3c 100644
--- a/packages/main/src/stores/SharedStore.ts
+++ b/packages/main/src/stores/SharedStore.ts
@@ -21,13 +21,13 @@
 import { defineSharedStoreModel, WritingDirection } from '@sophie/shared';
 import { getSnapshot, Instance } from 'mobx-state-tree';
 
-import getLogger from '../utils/getLogger';
+import getLogger from '../utils/getLogger.js';
 
-import GlobalSettings from './GlobalSettings';
-import Profile from './Profile';
-import Service from './Service';
-import type Config from './config/Config';
-import loadConfig from './config/loadConfig';
+import GlobalSettings from './GlobalSettings.js';
+import Profile from './Profile.js';
+import Service from './Service.js';
+import type Config from './config/Config.js';
+import loadConfig from './config/loadConfig.js';
 
 const log = getLogger('SharedStore');
 
diff --git a/packages/main/src/stores/__tests__/SharedStore.test.ts b/packages/main/src/stores/__tests__/SharedStore.test.ts
index 0ed63e3..78396da 100644
--- a/packages/main/src/stores/__tests__/SharedStore.test.ts
+++ b/packages/main/src/stores/__tests__/SharedStore.test.ts
@@ -18,10 +18,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import SharedStore from '../SharedStore';
-import type Config from '../config/Config';
-import type ProfileConfig from '../config/ProfileConfig';
-import type ServiceConfig from '../config/ServiceConfig';
+import SharedStore from '../SharedStore.js';
+import type Config from '../config/Config.js';
+import type ProfileConfig from '../config/ProfileConfig.js';
+import type ServiceConfig from '../config/ServiceConfig.js';
 
 const profileProps: ProfileConfig = {
   name: 'Test profile',
diff --git a/packages/main/src/stores/config/Config.ts b/packages/main/src/stores/config/Config.ts
index c38e3c5..adb10a6 100644
--- a/packages/main/src/stores/config/Config.ts
+++ b/packages/main/src/stores/config/Config.ts
@@ -18,10 +18,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type { GlobalSettingsSnapshotIn } from '../GlobalSettings';
+import type { GlobalSettingsSnapshotIn } from '../GlobalSettings.js';
 
-import type ProfileConfig from './ProfileConfig';
-import type ServiceConfig from './ServiceConfig';
+import type ProfileConfig from './ProfileConfig.js';
+import type ServiceConfig from './ServiceConfig.js';
 
 export default interface Config extends GlobalSettingsSnapshotIn {
   profiles?: ProfileConfig[] | undefined;
diff --git a/packages/main/src/stores/config/loadConfig.ts b/packages/main/src/stores/config/loadConfig.ts
index 2463084..8a1adcb 100644
--- a/packages/main/src/stores/config/loadConfig.ts
+++ b/packages/main/src/stores/config/loadConfig.ts
@@ -30,14 +30,14 @@ import {
 import { nanoid } from 'nanoid';
 import slug from 'slug';
 
-import GlobalSettings from '../GlobalSettings';
-import type Profile from '../Profile';
-import type Service from '../Service';
-import type { ServiceSettingsSnapshotIn } from '../ServiceSettings';
+import GlobalSettings from '../GlobalSettings.js';
+import type Profile from '../Profile.js';
+import type Service from '../Service.js';
+import type { ServiceSettingsSnapshotIn } from '../ServiceSettings.js';
 
-import type Config from './Config';
-import type ProfileConfig from './ProfileConfig';
-import type ServiceConfig from './ServiceConfig';
+import type Config from './Config.js';
+import type ProfileConfig from './ProfileConfig.js';
+import type ServiceConfig from './ServiceConfig.js';
 
 function generateId(name?: string | undefined): string {
   const nameSlug = typeof name === 'undefined' ? '' : slug(name);
diff --git a/packages/preload/src/contextBridge/__tests__/createSophieRenderer.test.ts b/packages/preload/src/contextBridge/__tests__/createSophieRenderer.test.ts
index 21620ed..b6af137 100644
--- a/packages/preload/src/contextBridge/__tests__/createSophieRenderer.test.ts
+++ b/packages/preload/src/contextBridge/__tests__/createSophieRenderer.test.ts
@@ -41,7 +41,7 @@ jest.unstable_mockModule('electron', () => ({
 const { ipcRenderer } = await import('electron');
 
 const { default: createSophieRenderer } = await import(
-  '../createSophieRenderer'
+  '../createSophieRenderer.js'
 );
 
 const event: Electron.IpcRendererEvent =
diff --git a/packages/preload/src/contextBridge/createSophieRenderer.ts b/packages/preload/src/contextBridge/createSophieRenderer.ts
index 3de9d9e..a05efd0 100644
--- a/packages/preload/src/contextBridge/createSophieRenderer.ts
+++ b/packages/preload/src/contextBridge/createSophieRenderer.ts
@@ -20,8 +20,12 @@
 
 import { SophieRenderer } from '@sophie/shared';
 
-import SharedStoreConnector, { dispatchAction } from './SharedStoreConnector';
-import TranslationsConnector, { getTranslation } from './TranslationsConnector';
+import SharedStoreConnector, {
+  dispatchAction,
+} from './SharedStoreConnector.js';
+import TranslationsConnector, {
+  getTranslation,
+} from './TranslationsConnector.js';
 
 export default function createSophieRenderer(devMode: boolean): SophieRenderer {
   const sharedStoreConnector = new SharedStoreConnector(devMode);
diff --git a/packages/preload/src/index.ts b/packages/preload/src/index.ts
index f13220c..3ad6fee 100644
--- a/packages/preload/src/index.ts
+++ b/packages/preload/src/index.ts
@@ -20,7 +20,7 @@
 
 import { contextBridge } from 'electron';
 
-import createSophieRenderer from './contextBridge/createSophieRenderer';
+import createSophieRenderer from './contextBridge/createSophieRenderer.js';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
diff --git a/packages/preload/tsconfig.json b/packages/preload/tsconfig.json
index 18c72b4..80ff957 100644
--- a/packages/preload/tsconfig.json
+++ b/packages/preload/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
     "noEmit": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "es2021"],
     "types": ["@types/jest"]
   },
   "references": [
diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index 86e2a55..193afe6 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -23,11 +23,11 @@ import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback } from 'react';
 
-import type RendererStore from '../stores/RendererStore';
+import type RendererStore from '../stores/RendererStore.js';
 
-import ServicePanel from './ServicePanel';
-import WindowTitle from './WindowTitle';
-import Sidebar from './sidebar/Sidebar';
+import ServicePanel from './ServicePanel.js';
+import WindowTitle from './WindowTitle.js';
+import Sidebar from './sidebar/Sidebar.js';
 
 const AppRoot = styled(Box)({
   display: 'flex',
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
index 2bfc9b0..b309c4d 100644
--- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -22,7 +22,7 @@ import Box from '@mui/material/Box';
 import throttle from 'lodash-es/throttle';
 import React, { ReactNode, useCallback, useRef } from 'react';
 
-import Service from '../stores/Service';
+import Service from '../stores/Service.js';
 
 function BrowserViewPlaceholder({
   service,
diff --git a/packages/renderer/src/components/ServicePanel.tsx b/packages/renderer/src/components/ServicePanel.tsx
index 2c79d99..507bc15 100644
--- a/packages/renderer/src/components/ServicePanel.tsx
+++ b/packages/renderer/src/components/ServicePanel.tsx
@@ -23,14 +23,14 @@ import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import type RendererStore from '../stores/RendererStore';
-import Service from '../stores/Service';
+import type RendererStore from '../stores/RendererStore.js';
+import Service from '../stores/Service.js';
 
-import BrowserViewPlaceholder from './BrowserViewPlaceholder';
-import InsecureConnectionBanner from './banner/InsecureConnectionBanner';
-import NewWindowBanner from './banner/NewWindowBanner';
-import ErrorPage from './errorPage/ErrorPage';
-import LocationBar from './locationBar/LocationBar';
+import BrowserViewPlaceholder from './BrowserViewPlaceholder.js';
+import InsecureConnectionBanner from './banner/InsecureConnectionBanner.js';
+import NewWindowBanner from './banner/NewWindowBanner.js';
+import ErrorPage from './errorPage/ErrorPage.js';
+import LocationBar from './locationBar/LocationBar.js';
 
 const ServicePanelRoot = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'hidden',
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index aa14039..50cc1c9 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -25,7 +25,7 @@ import {
 import { observer } from 'mobx-react-lite';
 import React, { type ReactNode } from 'react';
 
-import type RendererStore from '../stores/RendererStore';
+import type RendererStore from '../stores/RendererStore.js';
 
 function ThemeProvider({
   children,
diff --git a/packages/renderer/src/components/WindowTitle.tsx b/packages/renderer/src/components/WindowTitle.tsx
index 95e0fe6..fca8b4f 100644
--- a/packages/renderer/src/components/WindowTitle.tsx
+++ b/packages/renderer/src/components/WindowTitle.tsx
@@ -22,7 +22,7 @@ import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../stores/Service';
+import type Service from '../stores/Service.js';
 
 function WindowTitle({
   selectedService,
diff --git a/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx b/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx
index 0b70db6..6165153 100644
--- a/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx
+++ b/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx
@@ -27,9 +27,9 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
-import NotificationBanner from './NotificationBanner';
+import NotificationBanner from './NotificationBanner.js';
 
 function InsecureConnectionBanner({
   service,
diff --git a/packages/renderer/src/components/banner/NewWindowBanner.tsx b/packages/renderer/src/components/banner/NewWindowBanner.tsx
index ad9d07d..b9b0e4a 100644
--- a/packages/renderer/src/components/banner/NewWindowBanner.tsx
+++ b/packages/renderer/src/components/banner/NewWindowBanner.tsx
@@ -29,9 +29,9 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
-import NotificationBanner from './NotificationBanner';
+import NotificationBanner from './NotificationBanner.js';
 
 function NewWindowBanner({
   service,
diff --git a/packages/renderer/src/components/banner/NotificationBanner.tsx b/packages/renderer/src/components/banner/NotificationBanner.tsx
index 818f498..70fe693 100644
--- a/packages/renderer/src/components/banner/NotificationBanner.tsx
+++ b/packages/renderer/src/components/banner/NotificationBanner.tsx
@@ -18,9 +18,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { Typography } from '@mui/material';
 import Alert, { AlertColor } from '@mui/material/Alert';
 import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/packages/renderer/src/components/errorPage/CertificateDetails.tsx b/packages/renderer/src/components/errorPage/CertificateDetails.tsx
index 51e7920..04d483e 100644
--- a/packages/renderer/src/components/errorPage/CertificateDetails.tsx
+++ b/packages/renderer/src/components/errorPage/CertificateDetails.tsx
@@ -32,10 +32,10 @@ import { observer } from 'mobx-react-lite';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
-import SingleCertificateDetails from './SingleCertificateDetails';
-import TrustCertificateDialog from './TrustCertificateDialog';
+import SingleCertificateDetails from './SingleCertificateDetails.js';
+import TrustCertificateDialog from './TrustCertificateDialog.js';
 
 const SUMMARY_ID = 'Sophie-CertificateDetails-header';
 const DETAILS_ID = 'Sophie-CertificateDetails-content';
diff --git a/packages/renderer/src/components/errorPage/ErrorPage.tsx b/packages/renderer/src/components/errorPage/ErrorPage.tsx
index 10f54cd..dc01ddf 100644
--- a/packages/renderer/src/components/errorPage/ErrorPage.tsx
+++ b/packages/renderer/src/components/errorPage/ErrorPage.tsx
@@ -29,9 +29,9 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
-import CertificateDetails from './CertificateDetails';
+import CertificateDetails from './CertificateDetails.js';
 
 interface ErrorDetails {
   icon: JSX.Element;
diff --git a/packages/renderer/src/components/locationBar/ExtraButtons.tsx b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
index 4d4c3c4..bea115d 100644
--- a/packages/renderer/src/components/locationBar/ExtraButtons.tsx
+++ b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
@@ -25,7 +25,7 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
 function ExtraButtons({ service }: { service: Service }): JSX.Element {
   const { t } = useTranslation(undefined, {
diff --git a/packages/renderer/src/components/locationBar/GoButton.tsx b/packages/renderer/src/components/locationBar/GoButton.tsx
index 471f25e..571124a 100644
--- a/packages/renderer/src/components/locationBar/GoButton.tsx
+++ b/packages/renderer/src/components/locationBar/GoButton.tsx
@@ -22,7 +22,7 @@ import IconGo from '@mui/icons-material/Send';
 import IconButton from '@mui/material/IconButton';
 import React, { MouseEventHandler } from 'react';
 
-import LocationInputAdornment from './LocationInputAdornment';
+import LocationInputAdornment from './LocationInputAdornment.js';
 
 export default function GoButton({
   onClick,
diff --git a/packages/renderer/src/components/locationBar/LocationBar.tsx b/packages/renderer/src/components/locationBar/LocationBar.tsx
index 11981e9..fd7dcbb 100644
--- a/packages/renderer/src/components/locationBar/LocationBar.tsx
+++ b/packages/renderer/src/components/locationBar/LocationBar.tsx
@@ -22,12 +22,12 @@ import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import type RendererStore from '../../stores/RendererStore';
-import type Service from '../../stores/Service';
+import type RendererStore from '../../stores/RendererStore.js';
+import type Service from '../../stores/Service.js';
 
-import ExtraButtons from './ExtraButtons';
-import LocationTextField from './LocationTextField';
-import NavigationButtons from './NavigationButtons';
+import ExtraButtons from './ExtraButtons.js';
+import LocationTextField from './LocationTextField.js';
+import NavigationButtons from './NavigationButtons.js';
 
 export function getLocaltionBarID(service: Service): string {
   return `Sophie-${service.id}-LocationBar`;
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index 1d6b561..9b028b3 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -24,12 +24,12 @@ import { autorun } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import Service from '../../stores/Service';
+import Service from '../../stores/Service.js';
 
-import GoButton from './GoButton';
-import LocationOverlayInput from './LocationOverlayInput';
-import SecurityLabel from './SecurityLabel';
-import UrlOverlay from './UrlOverlay';
+import GoButton from './GoButton.js';
+import LocationOverlayInput from './LocationOverlayInput.js';
+import SecurityLabel from './SecurityLabel.js';
+import UrlOverlay from './UrlOverlay.js';
 
 const LocationTextFieldRoot = styled(FilledInput, {
   name: 'LocationTextField',
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 96e40e7..ab455eb 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -23,14 +23,14 @@ import IconArrowForward from '@mui/icons-material/ArrowForward';
 import IconStop from '@mui/icons-material/Close';
 import IconHome from '@mui/icons-material/HomeOutlined';
 import IconRefresh from '@mui/icons-material/Refresh';
-import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
 function NavigationButtons({ service }: { service: Service }): JSX.Element {
   const { t } = useTranslation(undefined, {
diff --git a/packages/renderer/src/components/locationBar/SecurityLabel.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
index ac51cff..7521fa6 100644
--- a/packages/renderer/src/components/locationBar/SecurityLabel.tsx
+++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
@@ -27,8 +27,8 @@ import { SecurityLabelKind } from '@sophie/shared';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import LocationInputAdornment from './LocationInputAdornment';
-import getAlertColor from './getAlertColor';
+import LocationInputAdornment from './LocationInputAdornment.js';
+import getAlertColor from './getAlertColor.js';
 
 const SecurityLabelRoot = styled(LocationInputAdornment, {
   name: 'SecurityLabel',
diff --git a/packages/renderer/src/components/locationBar/UrlOverlay.tsx b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
index a71fa4e..eaa86d2 100644
--- a/packages/renderer/src/components/locationBar/UrlOverlay.tsx
+++ b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
@@ -21,7 +21,7 @@
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
-import getAlertColor from './getAlertColor';
+import getAlertColor from './getAlertColor.js';
 
 export type SplitResult =
   | {
diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index 7a6d58a..f3f025a 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -24,7 +24,7 @@ import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
 const ServiceIconRoot = styled('div', {
   name: 'ServiceIcon',
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 7aa9124..56487df 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -26,11 +26,11 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type RendererStore from '../../stores/RendererStore';
-import type Service from '../../stores/Service';
-import { getServicePanelID } from '../ServicePanel';
+import type RendererStore from '../../stores/RendererStore.js';
+import type Service from '../../stores/Service.js';
+import { getServicePanelID } from '../ServicePanel.js';
 
-import ServiceIcon from './ServiceIcon';
+import ServiceIcon from './ServiceIcon.js';
 
 const ServiceSwitcherRoot = styled(Tabs, {
   name: 'ServiceSwitcher',
diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx
index 6c802ac..7308900 100644
--- a/packages/renderer/src/components/sidebar/Sidebar.tsx
+++ b/packages/renderer/src/components/sidebar/Sidebar.tsx
@@ -22,11 +22,11 @@ import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
-import RendererStore from '../../stores/RendererStore';
+import RendererStore from '../../stores/RendererStore.js';
 
-import ServiceSwitcher from './ServiceSwitcher';
-import ToggleDarkModeButton from './ToggleDarkModeButton';
-import ToggleLocationBarButton from './ToggleLocationBarButton';
+import ServiceSwitcher from './ServiceSwitcher.js';
+import ToggleDarkModeButton from './ToggleDarkModeButton.js';
+import ToggleLocationBarButton from './ToggleLocationBarButton.js';
 
 const SidebarRoot = styled(Box)(({ theme }) => ({
   flex: 0,
diff --git a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
index a922389..5e15d4b 100644
--- a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
@@ -25,7 +25,7 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type RendererStore from '../../stores/RendererStore';
+import type RendererStore from '../../stores/RendererStore.js';
 
 function ToggleDarkModeButton({
   store: { shared },
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index b6644a3..64b4ca9 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -20,15 +20,15 @@
 
 import IconChevronLeft from '@mui/icons-material/KeyboardDoubleArrowLeft';
 import IconChevronRight from '@mui/icons-material/KeyboardDoubleArrowRight';
-import { useTheme } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type RendererStore from '../../stores/RendererStore';
-import { getLocaltionBarID } from '../locationBar/LocationBar';
+import type RendererStore from '../../stores/RendererStore.js';
+import { getLocaltionBarID } from '../locationBar/LocationBar.js';
 
 function ToggleLocationBarIcon({
   loading,
diff --git a/packages/renderer/src/i18n/RtlCacheProvider.tsx b/packages/renderer/src/i18n/RtlCacheProvider.tsx
index 1303314..8b6fcf2 100644
--- a/packages/renderer/src/i18n/RtlCacheProvider.tsx
+++ b/packages/renderer/src/i18n/RtlCacheProvider.tsx
@@ -23,7 +23,7 @@ import { CacheProvider } from '@emotion/react';
 import { observer } from 'mobx-react-lite';
 import React, { type ReactNode } from 'react';
 
-import type RendererStore from '../stores/RendererStore';
+import type RendererStore from '../stores/RendererStore.js';
 
 function RtlCacheProvider({
   children,
diff --git a/packages/renderer/src/i18n/loadRendererLoalization.ts b/packages/renderer/src/i18n/loadRendererLoalization.ts
index 4d7b84a..d3ad252 100644
--- a/packages/renderer/src/i18n/loadRendererLoalization.ts
+++ b/packages/renderer/src/i18n/loadRendererLoalization.ts
@@ -24,10 +24,10 @@ import { reaction } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 import { initReactI18next } from 'react-i18next';
 
-import RendererStore from '../stores/RendererStore';
-import { getLogger } from '../utils/log';
+import RendererStore from '../stores/RendererStore.js';
+import { getLogger } from '../utils/log.js';
 
-import RendererIpcI18nBackend from './RendererIpcI18nBackend';
+import RendererIpcI18nBackend from './RendererIpcI18nBackend.js';
 
 const log = getLogger('loadRendererLocalization');
 
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 980e4dd..32fcee6 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -25,14 +25,14 @@ import React, { Suspense, lazy } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import './style.css';
-import Loading from './components/Loading';
-import ThemeProvider from './components/ThemeProvider';
-import { exposeToReduxDevtools, hotReload } from './devTools';
-import RtlCacheProvider from './i18n/RtlCacheProvider';
-import createRtlCache from './i18n/createRtlCache';
-import loadRendererLocalization from './i18n/loadRendererLoalization';
-import { createAndConnectRendererStore } from './stores/RendererStore';
-import { getLogger } from './utils/log';
+import Loading from './components/Loading.js';
+import ThemeProvider from './components/ThemeProvider.js';
+import { exposeToReduxDevtools, hotReload } from './devTools.js';
+import RtlCacheProvider from './i18n/RtlCacheProvider.js';
+import createRtlCache from './i18n/createRtlCache.js';
+import loadRendererLocalization from './i18n/loadRendererLoalization.js';
+import { createAndConnectRendererStore } from './stores/RendererStore.js';
+import { getLogger } from './utils/log.js';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
@@ -65,7 +65,7 @@ addDisposer(store, disposeSetHtmlLang);
 
 const rtlCache = createRtlCache();
 
-const App = lazy(() => import('./components/App'));
+const App = lazy(() => import('./components/App.js'));
 
 function Root(): JSX.Element {
   return (
diff --git a/packages/renderer/src/stores/GlobalSettings.ts b/packages/renderer/src/stores/GlobalSettings.ts
index 52971d4..11c2ebd 100644
--- a/packages/renderer/src/stores/GlobalSettings.ts
+++ b/packages/renderer/src/stores/GlobalSettings.ts
@@ -21,8 +21,8 @@
 import { defineGlobalSettingsModel, ThemeSource } from '@sophie/shared';
 import { Instance } from 'mobx-state-tree';
 
-import { getEnv } from './RendererEnv';
-import Service from './Service';
+import { getEnv } from './RendererEnv.js';
+import Service from './Service.js';
 
 const GlobalSettings = defineGlobalSettingsModel(Service).actions((self) => ({
   setSelectedServiceId(serviceId: string): void {
diff --git a/packages/renderer/src/stores/RendererStore.ts b/packages/renderer/src/stores/RendererStore.ts
index a3983ca..c4110bd 100644
--- a/packages/renderer/src/stores/RendererStore.ts
+++ b/packages/renderer/src/stores/RendererStore.ts
@@ -21,12 +21,12 @@
 import type { SophieRenderer } from '@sophie/shared';
 import { applySnapshot, applyPatch, Instance, types } from 'mobx-state-tree';
 
-import { getLogger } from '../utils/log';
+import { getLogger } from '../utils/log.js';
 
-import type GlobalSettings from './GlobalSettings';
-import type RendererEnv from './RendererEnv';
-import type Service from './Service';
-import SharedStore from './SharedStore';
+import type GlobalSettings from './GlobalSettings.js';
+import type RendererEnv from './RendererEnv.js';
+import type Service from './Service.js';
+import SharedStore from './SharedStore.js';
 
 const log = getLogger('RendererStore');
 
diff --git a/packages/renderer/src/stores/Service.ts b/packages/renderer/src/stores/Service.ts
index c8d513f..ff01964 100644
--- a/packages/renderer/src/stores/Service.ts
+++ b/packages/renderer/src/stores/Service.ts
@@ -25,8 +25,8 @@ import {
 } from '@sophie/shared';
 import { Instance } from 'mobx-state-tree';
 
-import { getEnv } from './RendererEnv';
-import ServiceSettings from './ServiceSettings';
+import { getEnv } from './RendererEnv.js';
+import ServiceSettings from './ServiceSettings.js';
 
 const Service = defineServiceModel(ServiceSettings)
   .views((self) => ({
diff --git a/packages/renderer/src/stores/ServiceSettings.ts b/packages/renderer/src/stores/ServiceSettings.ts
index 5d37347..d5c2843 100644
--- a/packages/renderer/src/stores/ServiceSettings.ts
+++ b/packages/renderer/src/stores/ServiceSettings.ts
@@ -21,7 +21,7 @@
 import { defineServiceSettingsModel } from '@sophie/shared';
 import { Instance } from 'mobx-state-tree';
 
-import Profile from './Profile';
+import Profile from './Profile.js';
 
 const ServiceSettings = defineServiceSettingsModel(Profile);
 
diff --git a/packages/renderer/src/stores/SharedStore.ts b/packages/renderer/src/stores/SharedStore.ts
index 062479d..0b04a86 100644
--- a/packages/renderer/src/stores/SharedStore.ts
+++ b/packages/renderer/src/stores/SharedStore.ts
@@ -21,9 +21,9 @@
 import { defineSharedStoreModel } from '@sophie/shared';
 import { Instance } from 'mobx-state-tree';
 
-import GlobalSettings from './GlobalSettings';
-import Profile from './Profile';
-import Service from './Service';
+import GlobalSettings from './GlobalSettings.js';
+import Profile from './Profile.js';
+import Service from './Service.js';
 
 const SharedStore = defineSharedStoreModel(
   GlobalSettings,
diff --git a/packages/renderer/tsconfig.json b/packages/renderer/tsconfig.json
index 4fe3896..3b576a8 100644
--- a/packages/renderer/tsconfig.json
+++ b/packages/renderer/tsconfig.json
@@ -2,8 +2,10 @@
   "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
     "noEmit": true,
+    "module": "es2022",
+    "moduleResolution": "node",
     "jsx": "react",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "es2021"],
     "types": ["@types/jest", "vite/client"]
   },
   "references": [
diff --git a/packages/service-inject/tsconfig.json b/packages/service-inject/tsconfig.json
index 33ce1de..126bce4 100644
--- a/packages/service-inject/tsconfig.json
+++ b/packages/service-inject/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
     "noEmit": true,
-    "lib": ["dom", "dom.iterable", "esnext"]
+    "lib": ["dom", "dom.iterable", "es2021"]
   },
   "references": [
     {
diff --git a/packages/service-preload/tsconfig.json b/packages/service-preload/tsconfig.json
index d7fb8cb..a3ba1bc 100644
--- a/packages/service-preload/tsconfig.json
+++ b/packages/service-preload/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
     "noEmit": true,
-    "lib": ["dom", "dom.iterable", "esnext"]
+    "lib": ["dom", "dom.iterable", "es2021"]
   },
   "references": [
     {
diff --git a/packages/service-shared/package.json b/packages/service-shared/package.json
index 57a2297..3940cf5 100644
--- a/packages/service-shared/package.json
+++ b/packages/service-shared/package.json
@@ -4,7 +4,12 @@
   "private": true,
   "sideEffects": false,
   "type": "module",
-  "exports": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "types": "dist/index.d.ts",
   "scripts": {
     "typecheck:workspace": "yarn g:typecheck",
diff --git a/packages/service-shared/src/index.ts b/packages/service-shared/src/index.ts
index 5165fe5..c415e45 100644
--- a/packages/service-shared/src/index.ts
+++ b/packages/service-shared/src/index.ts
@@ -18,6 +18,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-export { MainToServiceIpcMessage, ServiceToMainIpcMessage } from './ipc';
+export { MainToServiceIpcMessage, ServiceToMainIpcMessage } from './ipc.js';
 
-export { UnreadCount } from './schemas';
+export { UnreadCount } from './schemas.js';
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 2498797..6078902 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -4,7 +4,12 @@
   "private": true,
   "sideEffects": false,
   "type": "module",
-  "exports": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "types": "dist/index.d.ts",
   "scripts": {
     "typecheck:workspace": "yarn g:typecheck",
diff --git a/packages/shared/src/contextBridge/SophieRenderer.ts b/packages/shared/src/contextBridge/SophieRenderer.ts
index 732f941..7b934e5 100644
--- a/packages/shared/src/contextBridge/SophieRenderer.ts
+++ b/packages/shared/src/contextBridge/SophieRenderer.ts
@@ -20,9 +20,9 @@
 
 import type { ResourceKey } from 'i18next';
 
-import { Action } from '../schemas/Action';
-import { Translation } from '../schemas/Translation';
-import { SharedStoreListener } from '../stores/SharedStoreBase';
+import { Action } from '../schemas/Action.js';
+import { Translation } from '../schemas/Translation.js';
+import { SharedStoreListener } from '../stores/SharedStoreBase.js';
 
 export default interface SophieRenderer {
   onSharedStoreChange(this: void, listener: SharedStoreListener): Promise<void>;
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index b1d05f8..2e06234 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -18,71 +18,71 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-export type { default as SophieRenderer } from './contextBridge/SophieRenderer';
+export type { default as SophieRenderer } from './contextBridge/SophieRenderer.js';
 
-export { MainToRendererIpcMessage, RendererToMainIpcMessage } from './ipc';
+export { MainToRendererIpcMessage, RendererToMainIpcMessage } from './ipc.js';
 
-export { Action } from './schemas/Action';
+export { Action } from './schemas/Action.js';
 
-export { BrowserViewBounds } from './schemas/BrowserViewBounds';
+export { BrowserViewBounds } from './schemas/BrowserViewBounds.js';
 
-export { ServiceAction } from './schemas/ServiceAction';
+export { ServiceAction } from './schemas/ServiceAction.js';
 
-export { ThemeSource } from './schemas/ThemeSource';
+export { ThemeSource } from './schemas/ThemeSource.js';
 
-export { Translation } from './schemas/Translation';
+export { Translation } from './schemas/Translation.js';
 
 export type {
   CertificatePrincipal,
   CertificateSnapshotIn,
-} from './stores/Certificate';
-export { default as Certificate } from './stores/Certificate';
+} from './stores/Certificate.js';
+export { default as Certificate } from './stores/Certificate.js';
 
 export type {
   GlobalSettingsSnapshotIn,
   GlobalSettingsSnapshotOut,
-} from './stores/GlobalSettingsBase';
+} from './stores/GlobalSettingsBase.js';
 export {
   default as GlobalSettingsBase,
   defineGlobalSettingsModel,
   SYSTEM_LOCALE,
-} from './stores/GlobalSettingsBase';
+} from './stores/GlobalSettingsBase.js';
 
-export { default as Profile } from './stores/Profile';
+export { default as Profile } from './stores/Profile.js';
 
 export type {
   ProfileSettingsSnapshotIn,
   ProfileSettingsSnapshotOut,
-} from './stores/ProfileSettings';
-export { default as ProfileSettings } from './stores/ProfileSettings';
+} from './stores/ProfileSettings.js';
+export { default as ProfileSettings } from './stores/ProfileSettings.js';
 
 export {
   default as ServiceBase,
   defineServiceModel,
   SecurityLabelKind,
-} from './stores/ServiceBase';
+} from './stores/ServiceBase.js';
 
 export type {
   ServiceSettingsSnapshotIn,
   ServiceSettingsSnapshotOut,
-} from './stores/ServiceSettingsBase';
+} from './stores/ServiceSettingsBase.js';
 export {
   default as ServiceSettingsBase,
   defineServiceSettingsModel,
-} from './stores/ServiceSettingsBase';
+} from './stores/ServiceSettingsBase.js';
 
-export type { ServiceStateSnapshotIn } from './stores/ServiceState';
-export { default as ServiceState } from './stores/ServiceState';
+export type { ServiceStateSnapshotIn } from './stores/ServiceState.js';
+export { default as ServiceState } from './stores/ServiceState.js';
 
 export type {
   SharedStoreListener,
   SharedStoreSnapshotIn,
   SharedStoreSnapshotOut,
-} from './stores/SharedStoreBase';
+} from './stores/SharedStoreBase.js';
 export {
   default as SharedStoreBase,
   defineSharedStoreModel,
   FALLBACK_LOCALE,
-} from './stores/SharedStoreBase';
+} from './stores/SharedStoreBase.js';
 
-export { default as WritingDirection } from './stores/WritingDirection';
+export { default as WritingDirection } from './stores/WritingDirection.js';
diff --git a/packages/shared/src/schemas/Action.ts b/packages/shared/src/schemas/Action.ts
index 7ece27a..11d63aa 100644
--- a/packages/shared/src/schemas/Action.ts
+++ b/packages/shared/src/schemas/Action.ts
@@ -20,8 +20,8 @@
 
 import { z } from 'zod';
 
-import { ServiceAction } from './ServiceAction';
-import { ThemeSource } from './ThemeSource';
+import { ServiceAction } from './ServiceAction.js';
+import { ThemeSource } from './ThemeSource.js';
 
 export const Action = /* @__PURE__ */ (() =>
   z.union([
diff --git a/packages/shared/src/schemas/ServiceAction.ts b/packages/shared/src/schemas/ServiceAction.ts
index 9486aaf..744c7cf 100644
--- a/packages/shared/src/schemas/ServiceAction.ts
+++ b/packages/shared/src/schemas/ServiceAction.ts
@@ -20,7 +20,7 @@
 
 import { z } from 'zod';
 
-import { BrowserViewBounds } from './BrowserViewBounds';
+import { BrowserViewBounds } from './BrowserViewBounds.js';
 
 export const ServiceAction = /* @__PURE__ */ (() =>
   z.union([
diff --git a/packages/shared/src/stores/GlobalSettingsBase.ts b/packages/shared/src/stores/GlobalSettingsBase.ts
index c74c822..9d677c4 100644
--- a/packages/shared/src/stores/GlobalSettingsBase.ts
+++ b/packages/shared/src/stores/GlobalSettingsBase.ts
@@ -26,9 +26,9 @@ import {
   IAnyModelType,
 } from 'mobx-state-tree';
 
-import { ThemeSource } from '../schemas/ThemeSource';
+import { ThemeSource } from '../schemas/ThemeSource.js';
 
-import ServiceBase from './ServiceBase';
+import ServiceBase from './ServiceBase.js';
 
 export const SYSTEM_LOCALE = 'system';
 
diff --git a/packages/shared/src/stores/Profile.ts b/packages/shared/src/stores/Profile.ts
index 611ca6f..076c639 100644
--- a/packages/shared/src/stores/Profile.ts
+++ b/packages/shared/src/stores/Profile.ts
@@ -20,8 +20,8 @@
 
 import { Instance, types } from 'mobx-state-tree';
 
-import Certificate, { CertificateSnapshotIn } from './Certificate';
-import ProfileSettings from './ProfileSettings';
+import Certificate, { CertificateSnapshotIn } from './Certificate.js';
+import ProfileSettings from './ProfileSettings.js';
 
 const Profile = /* @__PURE__ */ (() =>
   types
diff --git a/packages/shared/src/stores/ServiceBase.ts b/packages/shared/src/stores/ServiceBase.ts
index 0e4be97..7bd1d68 100644
--- a/packages/shared/src/stores/ServiceBase.ts
+++ b/packages/shared/src/stores/ServiceBase.ts
@@ -20,10 +20,10 @@
 
 import { IAnyModelType, Instance, types } from 'mobx-state-tree';
 
-import type { CertificateSnapshotIn } from './Certificate';
-import type Profile from './Profile';
-import ServiceSettingsBase from './ServiceSettingsBase';
-import ServiceState from './ServiceState';
+import type { CertificateSnapshotIn } from './Certificate.js';
+import type Profile from './Profile.js';
+import ServiceSettingsBase from './ServiceSettingsBase.js';
+import ServiceState from './ServiceState.js';
 
 export enum SecurityLabelKind {
   Empty = 'empty',
diff --git a/packages/shared/src/stores/ServiceSettingsBase.ts b/packages/shared/src/stores/ServiceSettingsBase.ts
index 45eb15d..b9df516 100644
--- a/packages/shared/src/stores/ServiceSettingsBase.ts
+++ b/packages/shared/src/stores/ServiceSettingsBase.ts
@@ -26,7 +26,7 @@ import {
   IAnyModelType,
 } from 'mobx-state-tree';
 
-import ProfileBase from './Profile';
+import ProfileBase from './Profile.js';
 
 export function defineServiceSettingsModel<TP extends IAnyModelType>(
   profile: TP,
diff --git a/packages/shared/src/stores/ServiceState.ts b/packages/shared/src/stores/ServiceState.ts
index ad49321..d311a70 100644
--- a/packages/shared/src/stores/ServiceState.ts
+++ b/packages/shared/src/stores/ServiceState.ts
@@ -20,7 +20,7 @@
 
 import { Instance, SnapshotIn, types } from 'mobx-state-tree';
 
-import Certificate from './Certificate';
+import Certificate from './Certificate.js';
 
 const ServiceState = /* @__PURE__ */ (() =>
   types.optional(
diff --git a/packages/shared/src/stores/SharedStoreBase.ts b/packages/shared/src/stores/SharedStoreBase.ts
index 949ef6a..4526c95 100644
--- a/packages/shared/src/stores/SharedStoreBase.ts
+++ b/packages/shared/src/stores/SharedStoreBase.ts
@@ -27,10 +27,10 @@ import {
   IAnyModelType,
 } from 'mobx-state-tree';
 
-import GlobalSettingsBase from './GlobalSettingsBase';
-import ProfileBase from './Profile';
-import ServiceBase from './ServiceBase';
-import WritingDirection from './WritingDirection';
+import GlobalSettingsBase from './GlobalSettingsBase.js';
+import ProfileBase from './Profile.js';
+import ServiceBase from './ServiceBase.js';
+import WritingDirection from './WritingDirection.js';
 
 export const FALLBACK_LOCALE = 'en';
 
diff --git a/packages/test-utils/src/index.ts b/packages/test-utils/src/index.ts
index c4db5b0..52ac98d 100644
--- a/packages/test-utils/src/index.ts
+++ b/packages/test-utils/src/index.ts
@@ -22,4 +22,4 @@
   eslint-disable-next-line import/prefer-default-export --
   Keep API consistent for more helpers in the future.
 */
-export { default as fake } from './fake';
+export { default as fake } from './fake.js';