fix(devtools): Update ESM export extension (#5364)

* fix(devtools): Update ESM export extension

* Update Svelte devtools types error

* Fix svelte-query-devtools types error

Author: ardeora

packages/query-devtools/package.json

@@ -12,11 +12,11 @@
   },
   "types": "build/types/index.d.ts",
   "main": "build/umd/index.js",
-  "module": "build/esm/index.js",
+  "module": "build/esm/index.mjs",
   "exports": {
     ".": {
       "types": "./build/types/index.d.ts",
-      "import": "./build/esm/index.js",
+      "import": "./build/esm/index.mjs",
       "require": "./build/umd/index.js",
       "default": "./build/umd/index.js"
     },

packages/svelte-query-devtools/src/Devtools.svelte

@@ -17,7 +17,7 @@
   export let errorTypes: DevToolsErrorType[] = []
 
   let ref: HTMLDivElement
-  let devtools: TanstackQueryDevtools
+  let devtools: TanstackQueryDevtools | undefined
 
   if (DEV && BROWSER) {
     onMount(async () => {
@@ -37,7 +37,7 @@
       devtools.mount(ref)
 
       return () => {
-        devtools.unmount()
+        devtools?.unmount()
       }
     })
   }

packages/svelte-query-devtools/tsconfig.json

@@ -33,7 +33,7 @@
   "paths": {
     "@tanstack/query-core": ["../query-core/src"],
     "@tanstack/query-devtools": ["../query-devtools/src"],
-    "@tanstack/svelte-query": ["../svelte-query/src"],
+    "@tanstack/svelte-query": ["../svelte-query/src"]
   },
   "references": [
     { "path": "../query-core" },

packages/svelte-query/package.json

@@ -31,7 +31,7 @@
   ],
   "scripts": {
     "clean": "rimraf ./build",
-    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json && tsc --emitDeclarationOnly --declaration --outDir build/lib",
     "test:eslint": "eslint --ext .svelte,.ts ./src",
     "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",

packages/svelte-query/tsconfig.json

@@ -12,7 +12,6 @@
     "lib": ["esnext", "DOM", "DOM.Iterable"],
     "moduleResolution": "node",
     "module": "esnext",
-    "noEmit": true,
     "noImplicitAny": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,

rollup.config.ts

@@ -499,6 +499,10 @@ function createTanstackQueryDevtoolsConfig() {
   outputs.forEach((output) => {
     const format = output.format
     output.dir = `${packageDir}/build/${format}`
+    if (output.format === 'esm') {
+      output.dir = undefined
+      output.file = `${packageDir}/build/${format}/index.mjs`
+    }
   })
 
   solidRollupOptions.external = []

tsconfig.json

@@ -9,6 +9,7 @@
     { "path": "packages/react-query" },
     { "path": "packages/react-query-devtools" },
     { "path": "packages/react-query-persist-client" },
+    { "path": "packages/svelte-query" },
     { "path": "packages/solid-query" },
     { "path": "packages/vue-query" },
     { "path": "packages/query-devtools" }