Skip to content

[@zenstackhq/tanstack-query@3.2.1] ESM import paths missing extensions #607

@caiotarifa

Description

@caiotarifa

The package @zenstackhq/tanstack-query@3.2.1 contains ESM imports without .js extensions, causing module resolution errors in Node.js v24+ with "type": "module".

Error

Cannot find module '.../dist/common/client' imported from .../dist/vue.js

Cause

Files dist/vue.js, dist/react.js, and dist/common/client.js have imports like:

import { getAllQueries } from './common/client';

Node.js ESM requires explicit extensions:

import { getAllQueries } from './common/client.js';

Environment:

Node.js v24.11.0
Nuxt 4.2.2 with "type": "module"
@zenstackhq/tanstack-query@3.2.1

Workaround

Applied pnpm patch adding .js extensions to all relative imports:

pnpm patch @zenstackhq/tanstack-query@3.2.1
diff --git a/dist/common/client.js b/dist/common/client.js
index d7f55e6f575fbd0420f7b07d748f8099ab0c4091..61de13e6d18000438049dff18b8798fec77b35cd 100644
--- a/dist/common/client.js
+++ b/dist/common/client.js
@@ -1,4 +1,4 @@
-import { parseQueryKey } from './query-key';
+import { parseQueryKey } from './query-key.js';
 export function invalidateQueriesMatchingPredicate(queryClient, predicate) {
     return queryClient.invalidateQueries({
         predicate: ({ queryKey }) => {
diff --git a/dist/vue.js b/dist/vue.js
index 86d50efce143183bc65511e2770ad92394ee2dee..093c44864aaae330028db833e89300a05ad63861 100644
--- a/dist/vue.js
+++ b/dist/vue.js
@@ -3,9 +3,9 @@ import { createInvalidator, createOptimisticUpdater, DEFAULT_QUERY_ENDPOINT, } f
 import { fetcher, makeUrl, marshal } from '@zenstackhq/client-helpers/fetch';
 import { lowerCaseFirst } from '@zenstackhq/common-helpers';
 import { computed, inject, provide, toValue, unref } from 'vue';
-import { getAllQueries, invalidateQueriesMatchingPredicate } from './common/client';
-import { CUSTOM_PROC_ROUTE_NAME } from './common/constants';
-import { getQueryKey } from './common/query-key';
+import { getAllQueries, invalidateQueriesMatchingPredicate } from './common/client.js';
+import { CUSTOM_PROC_ROUTE_NAME } from './common/constants.js';
+import { getQueryKey } from './common/query-key.js';
 export const VueQueryContextKey = 'zenstack-vue-query-context';
 /**
  * Provide context for query settings.
pnpm patch-commit

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions