Convert remaining packages to ESM (#2013)

* redux-devtools-app-core

* redux-devtools-app

* redux-devtools-extension

* redux-devtools-serialize

* Fix patch

* redux-devtools-utils

* redux-devtools-remote

* extension

* Fixes

* Fixes

* Update package versions to major and convert to ESM

Convert remaining packages in the project to ESM.

* Updates

* Fix

* Fix

Author: Methuselah96

.changeset/tidy-ladybugs-invite.md

@@ -0,0 +1,10 @@
+---
+'@redux-devtools/app': major
+'@redux-devtools/app-core': major
+'@redux-devtools/extension': major
+'@redux-devtools/remote': major
+'@redux-devtools/serialize': major
+'@redux-devtools/utils': major
+---
+
+Convert remaining packages to ESM

extension/eslint.config.mjs

@@ -14,6 +14,7 @@ export default [
       'edge',
       'examples',
       'firefox',
+      'jest.config.ts',
       'test/electron/fixture/dist',
     ],
   },

extension/jest.config.cjs

@@ -0,0 +1,18 @@
+import { createJsWithTsEsmPreset, type JestConfigWithTsJest } from 'ts-jest';
+
+const presetConfig = createJsWithTsEsmPreset({
+  tsconfig: 'tsconfig.json',
+});
+
+const jestConfig: JestConfigWithTsJest = {
+  ...presetConfig,
+  setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/examples'],
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.js',
+  },
+};
+
+export default jestConfig;

extension/jest.config.ts

@@ -6,6 +6,7 @@
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension",
   "license": "MIT",
   "author": "Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
@@ -15,10 +16,10 @@
     "build:extension": "node build.mjs",
     "build:examples": "babel-node examples/buildAll.js",
     "clean": "rimraf dist && rimraf chrome/dist && rimraf edge/dist && rimraf firefox/dist",
-    "test:app": "cross-env BABEL_ENV=test jest test/app",
-    "test:chrome": "cross-env SE_FORCE_BROWSER_DOWNLOAD=true jest test/chrome",
+    "test:app": "cross-env BABEL_ENV=test node --experimental-vm-modules node_modules/jest/bin/jest.js test/app",
+    "test:chrome": "cross-env SE_FORCE_BROWSER_DOWNLOAD=true node --experimental-vm-modules node_modules/jest/bin/jest.js test/chrome",
     "build:test:electron:fixture": "webpack --config test/electron/fixture/webpack.config.js",
-    "test:electron": "pnpm run build:test:electron:fixture && jest test/electron",
+    "test:electron": "pnpm run build:test:electron:fixture && node --experimental-vm-modules node_modules/jest/bin/jest.js test/electron",
     "test": "pnpm run test:app && pnpm run test:chrome && pnpm run test:electron",
     "lint": "eslint .",
     "type-check": "tsc --noEmit"
@@ -53,6 +54,7 @@
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@babel/register": "^7.28.6",
+    "@jest/globals": "^30.2.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",

extension/package.json

@@ -19,8 +19,8 @@ import {
 } from '@redux-devtools/app';
 import { GoBroadcast } from 'react-icons/go';
 import { MdOutlineWindow } from 'react-icons/md';
-import type { Position } from '../pageScript/api/openWindow';
-import type { SingleMessage } from '../background/store/apiMiddleware';
+import type { Position } from '../pageScript/api/openWindow.js';
+import type { SingleMessage } from '../background/store/apiMiddleware.js';
 
 type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = ResolveThunks<typeof actionCreators>;

extension/src/app/Actions.tsx

@@ -8,7 +8,7 @@ import {
   Settings,
   StoreState,
 } from '@redux-devtools/app';
-import Actions from './Actions';
+import Actions from './Actions.js';
 
 type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = ResolveThunks<typeof actionCreators>;

extension/src/app/App.tsx

@@ -1,4 +1,4 @@
-import openDevToolsWindow, { DevToolsPosition } from './openWindow';
+import openDevToolsWindow, { DevToolsPosition } from './openWindow.js';
 
 export function createMenu() {
   const menus = [

extension/src/background/contextMenus.ts

@@ -1,8 +1,8 @@
-import '../chromeApiMock';
-import configureStore from './store/backgroundStore';
-import openDevToolsWindow, { DevToolsPosition } from './openWindow';
-import { createMenu, removeMenu } from './contextMenus';
-import { getOptions } from '../options/syncOptions';
+import '../chromeApiMock.js';
+import configureStore from './store/backgroundStore.js';
+import openDevToolsWindow, { DevToolsPosition } from './openWindow.js';
+import { createMenu, removeMenu } from './contextMenus.js';
+import { getOptions } from '../options/syncOptions.js';
 
 // Expose the extension's store globally to access it from the windows
 // via chrome.runtime.getBackgroundPage

extension/src/background/index.ts

@@ -1,5 +1,5 @@
 import { LIFTED_ACTION } from '@redux-devtools/app';
-import { store } from './index';
+import { store } from './index.js';
 
 export function getReport(
   reportId: string,