diff --git a/js/gulp/arrow-task.js b/js/gulp/arrow-task.js
index 2de20947dc2f5..f8a18fe122a93 100644
--- a/js/gulp/arrow-task.js
+++ b/js/gulp/arrow-task.js
@@ -41,6 +41,7 @@ export const arrowTask = ((cache) => memoizeTask(cache, function copyMain(target
     const esnextUmdSourceMapsGlob = `${targetDir(`esnext`, `umd`)}/*.map`;
     return ObservableForkJoin([
         observableFromStreams(gulp.src(dtsGlob), gulp.dest(out)), // copy d.ts files
+        observableFromStreams(gulp.src(dtsGlob), gulpRename((p) => { p.extname = '.mts'; }), gulp.dest(out)), // copy d.ts files as esm
         observableFromStreams(gulp.src(cjsGlob), gulp.dest(out)), // copy es2015 cjs files
         observableFromStreams(gulp.src(cjsSourceMapsGlob), gulp.dest(out)), // copy es2015 cjs sourcemaps
         observableFromStreams(gulp.src(esmSourceMapsGlob), gulp.dest(out)), // copy es2015 esm sourcemaps
diff --git a/js/gulp/package-task.js b/js/gulp/package-task.js
index 449b0761ca9e9..9bc002e664885 100644
--- a/js/gulp/package-task.js
+++ b/js/gulp/package-task.js
@@ -45,6 +45,9 @@ const createMainPackageJson = (target, format) => (orig) => ({
     type: 'commonjs',
     main: `${mainExport}.node.js`,
     module: `${mainExport}.node.mjs`,
+    types: `${mainExport}.node.d.ts`,
+    unpkg: `${mainExport}.es2015.min.js`,
+    jsdelivr: `${mainExport}.es2015.min.js`,
     browser: {
         [`./${mainExport}.node.js`]: `./${mainExport}.dom.js`,
         [`./${mainExport}.node.mjs`]: `./${mainExport}.dom.mjs`
@@ -52,20 +55,35 @@ const createMainPackageJson = (target, format) => (orig) => ({
     exports: {
         '.': {
             node: {
-                import: `./${mainExport}.node.mjs`,
-                require: `./${mainExport}.node.js`,
+                import: {
+                    types: `./${mainExport}.node.d.mts`,
+                    default: `./${mainExport}.node.mjs`,
+                },
+                require: {
+                    types: `./${mainExport}.node.d.ts`,
+                    default: `./${mainExport}.node.js`,
+                },
             },
-            import: `./${mainExport}.dom.mjs`,
-            require: `./${mainExport}.dom.js`,
+            import: {
+                types: `./${mainExport}.dom.d.mts`,
+                default: `./${mainExport}.dom.mjs`,
+            },
+            require: {
+                types: `./${mainExport}.dom.d.ts`,
+                default: `./${mainExport}.dom.js`,
+            }
         },
         './*': {
-            import: `./*.mjs`,
-            require: `./*.js`
-        }
+            import: {
+                types: `./*.d.mts`,
+                default: `./*.mjs`,
+            },
+            require: {
+                types: `./*.d.ts`,
+                default: `./*.js`,
+            },
+        },
     },
-    types: `${mainExport}.node.d.ts`,
-    unpkg: `${mainExport}.es2015.min.js`,
-    jsdelivr: `${mainExport}.es2015.min.js`,
     sideEffects: false,
     esm: { mode: `all`, sourceMap: true }
 });