fix: qs imports and usage in ESM builds (#5850)

refinedev · Apr 24, 2024 · c2ef59b · c2ef59b
1 parent 8a8f88b
commit c2ef59b
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 32 deletions.
diff --git a/.changeset/rude-suns-agree.md b/.changeset/rude-suns-agree.md
@@ -0,0 +1,10 @@
+---
+"@refinedev/nextjs-router": patch
+"@refinedev/react-router-v6": patch
+"@refinedev/remix-router": patch
+"@refinedev/strapi-v4": patch
+---
+
+fix: replace imports of `qs` with default imports
+
+Updated `qs` imports and usage to prevent issues with ESM builds and to ensure correctly importing the module.
diff --git a/packages/nextjs-router/src/app/bindings.tsx b/packages/nextjs-router/src/app/bindings.tsx
@@ -7,7 +7,7 @@ import {
 } from "@refinedev/core";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import Link from "next/link";
-import { parse, stringify } from "qs";
+import qs from "qs";
 import React, { ComponentProps, useContext } from "react";
 import { paramsFromCurrentPath } from "../common/params-from-current-path";
 import { convertToNumberIfPossible } from "src/common/convert-to-number-if-possible";
@@ -46,7 +46,7 @@ export const routerBindings: RouterBindings = {
 
         const urlQuery = {
           ...(keepQuery
-            ? parse(searchParamsObj.toString(), {
+            ? qs.parse(searchParamsObj.toString(), {
                 ignoreQueryPrefix: true,
               })
             : {}),
@@ -65,7 +65,7 @@ export const routerBindings: RouterBindings = {
         const hasUrlQuery = Object.keys(urlQuery).length > 0;
 
         const fullPath = `${urlTo}${
-          hasUrlQuery ? stringify(urlQuery, stringifyConfig) : ""
+          hasUrlQuery ? qs.stringify(urlQuery, stringifyConfig) : ""
         }${hasUrlHash ? urlHash : ""}`;
 
         if (type === "path") {
@@ -109,7 +109,7 @@ export const routerBindings: RouterBindings = {
 
     const parsedParams = React.useMemo(() => {
       const searchParams = searchParamsObj.toString();
-      return parse(searchParams, { ignoreQueryPrefix: true });
+      return qs.parse(searchParams, { ignoreQueryPrefix: true });
     }, [searchParamsObj]);
 
     const fn = React.useCallback(() => {

diff --git a/packages/nextjs-router/src/common/parse-table-params.ts b/packages/nextjs-router/src/common/parse-table-params.ts
@@ -1,8 +1,8 @@
-import { parse } from "qs";
+import qs from "qs";
 import type { ParsedParams } from "@refinedev/core";
 
 const parseTableParams = (search: string) => {
-  const parsed: ParsedParams = parse(search, { ignoreQueryPrefix: true });
+  const parsed: ParsedParams = qs.parse(search, { ignoreQueryPrefix: true });
 
   const tableReady = {
     ...parsed,

diff --git a/packages/nextjs-router/src/pages/bindings.tsx b/packages/nextjs-router/src/pages/bindings.tsx
@@ -7,7 +7,7 @@ import {
 } from "@refinedev/core";
 import { useRouter } from "next/router";
 import Link from "next/link";
-import { parse, stringify } from "qs";
+import qs from "qs";
 import React, { ComponentProps, useContext } from "react";
 import { paramsFromCurrentPath } from "../common/params-from-current-path";
 import { convertToNumberIfPossible } from "src/common/convert-to-number-if-possible";
@@ -44,7 +44,7 @@ export const routerBindings: RouterBindings = {
 
         const urlQuery = {
           ...(keepQuery
-            ? parse(pathname.split("?")[1], {
+            ? qs.parse(pathname.split("?")[1], {
                 ignoreQueryPrefix: true,
               })
             : {}),
@@ -63,7 +63,7 @@ export const routerBindings: RouterBindings = {
         const hasUrlQuery = Object.keys(urlQuery).length > 0;
 
         const fullPath = `${urlTo}${
-          hasUrlQuery ? stringify(urlQuery, stringifyConfig) : ""
+          hasUrlQuery ? qs.stringify(urlQuery, stringifyConfig) : ""
         }${hasUrlHash ? urlHash : ""}`;
 
         if (type === "path") {
@@ -109,11 +109,11 @@ export const routerBindings: RouterBindings = {
 
     const parsedParams = React.useMemo(() => {
       const searchParams = pathname.split("?")[1];
-      return parse(searchParams, { ignoreQueryPrefix: true });
+      return qs.parse(searchParams, { ignoreQueryPrefix: true });
     }, [pathname]);
 
     const fn = React.useCallback(() => {
-      const parsedQuery = parse(query as Record<string, string>, {
+      const parsedQuery = qs.parse(query as Record<string, string>, {
         ignoreQueryPrefix: true,
       });
       const combinedParams = {

diff --git a/packages/react-router-v6/src/bindings.tsx b/packages/react-router-v6/src/bindings.tsx
@@ -7,7 +7,7 @@ import {
   ResourceContext,
 } from "@refinedev/core";
 import { useCallback, useContext } from "react";
-import { parse, stringify } from "qs";
+import qs from "qs";
 import {
   useNavigate,
   useLocation,
@@ -42,7 +42,7 @@ export const routerBindings: RouterBindings = {
         const urlQuery = {
           ...(keepQuery &&
             existingSearch &&
-            parse(existingSearch, { ignoreQueryPrefix: true })),
+            qs.parse(existingSearch, { ignoreQueryPrefix: true })),
           ...query,
         };
 
@@ -63,7 +63,7 @@ export const routerBindings: RouterBindings = {
         const urlTo = to || "";
 
         const fullPath = `${urlTo}${
-          hasUrlQuery ? stringify(urlQuery, stringifyConfig) : ""
+          hasUrlQuery ? qs.stringify(urlQuery, stringifyConfig) : ""
         }${hasUrlHash ? urlHash : ""}`;
 
         if (type === "path") {
@@ -104,7 +104,7 @@ export const routerBindings: RouterBindings = {
     }
 
     const fn = useCallback(() => {
-      const parsedSearch = parse(search, { ignoreQueryPrefix: true });
+      const parsedSearch = qs.parse(search, { ignoreQueryPrefix: true });
 
       const combinedParams = {
         ...params,

diff --git a/packages/remix/src/bindings.tsx b/packages/remix/src/bindings.tsx
@@ -6,7 +6,7 @@ import {
   ParseResponse,
 } from "@refinedev/core";
 import { useParams, useLocation, useNavigate, Link } from "@remix-run/react";
-import { parse, stringify } from "qs";
+import qs from "qs";
 import React, { ComponentProps, useCallback, useContext } from "react";
 import { paramsFromCurrentPath } from "./params-from-current-path";
 import { convertToNumberIfPossible } from "./convert-to-number-if-possible";
@@ -36,7 +36,7 @@ export const routerBindings: RouterBindings = {
         const urlQuery = {
           ...(keepQuery &&
             existingSearch &&
-            parse(existingSearch, { ignoreQueryPrefix: true })),
+            qs.parse(existingSearch, { ignoreQueryPrefix: true })),
           ...query,
         };
 
@@ -57,7 +57,7 @@ export const routerBindings: RouterBindings = {
         const urlTo = to || "";
 
         const fullPath = `${urlTo}${
-          hasUrlQuery ? stringify(urlQuery, stringifyConfig) : ""
+          hasUrlQuery ? qs.stringify(urlQuery, stringifyConfig) : ""
         }${hasUrlHash ? urlHash : ""}`;
 
         if (type === "path") {
@@ -98,7 +98,7 @@ export const routerBindings: RouterBindings = {
     const inferredId = inferredParams.id;
 
     const fn = useCallback(() => {
-      const parsedSearch = parse(search, { ignoreQueryPrefix: true });
+      const parsedSearch = qs.parse(search, { ignoreQueryPrefix: true });
 
       const combinedParams = {
         ...inferredParams,

diff --git a/packages/remix/src/parse-table-params.ts b/packages/remix/src/parse-table-params.ts
@@ -1,8 +1,8 @@
-import { parse } from "qs";
+import qs from "qs";
 import type { ParsedParams } from "@refinedev/core";
 
 export const parseTableParams = (search: string) => {
-  const parsed: ParsedParams = parse(search, { ignoreQueryPrefix: true });
+  const parsed: ParsedParams = qs.parse(search, { ignoreQueryPrefix: true });
 
   const tableReady = {
     ...parsed,

diff --git a/packages/strapi-v4/src/dataProvider.ts b/packages/strapi-v4/src/dataProvider.ts
@@ -1,6 +1,6 @@
 import { DataProvider as IDataProvider, HttpError } from "@refinedev/core";
 import { AxiosInstance } from "axios";
-import { stringify } from "qs";
+import qs from "qs";
 import {
   axiosInstance,
   generateFilter,
@@ -41,7 +41,7 @@ export const DataProvider = (
     };
 
     const { data } = await httpClient.get(
-      `${url}?${stringify(query, {
+      `${url}?${qs.stringify(query, {
         encodeValuesOnly: true,
       })}&${queryFilters}`,
     );
@@ -78,7 +78,7 @@ export const DataProvider = (
     };
 
     const { data } = await httpClient.get(
-      `${url}?${stringify(query, {
+      `${url}?${qs.stringify(query, {
         encodeValuesOnly: true,
       })}&${queryFilters}`,
     );
@@ -199,7 +199,7 @@ export const DataProvider = (
       publicationState,
     };
 
-    const url = `${apiUrl}/${resource}/${id}?${stringify(query, {
+    const url = `${apiUrl}/${resource}/${id}?${qs.stringify(query, {
       encode: false,
     })}`;
 
@@ -248,7 +248,7 @@ export const DataProvider = (
     if (sorters) {
       const sortQuery = generateSort(sorters);
       if (sortQuery.length > 0) {
-        requestUrl = `${requestUrl}&${stringify({
+        requestUrl = `${requestUrl}&${qs.stringify({
           sort: sortQuery.join(","),
         })}`;
       }
@@ -260,7 +260,7 @@ export const DataProvider = (
     }
 
     if (query) {
-      requestUrl = `${requestUrl}&${stringify(query)}`;
+      requestUrl = `${requestUrl}&${qs.stringify(query)}`;
     }
 
     let axiosResponse;

diff --git a/packages/strapi-v4/src/helpers/auth.ts b/packages/strapi-v4/src/helpers/auth.ts
@@ -1,6 +1,6 @@
 import { MetaQuery, pickNotDeprecated } from "@refinedev/core";
 import axios from "axios";
-import { stringify } from "qs";
+import qs from "qs";
 
 interface ILoginResponse {
   jwt: string;
@@ -57,7 +57,7 @@ export const AuthHelper = (apiUrl: string) => ({
     };
 
     return await axios.get<IUser>(
-      `${apiUrl}/users/me?${stringify(query, {
+      `${apiUrl}/users/me?${qs.stringify(query, {
         encodeValuesOnly: true,
       })}`,
       {

diff --git a/packages/strapi-v4/src/utils/generateFilter.ts b/packages/strapi-v4/src/utils/generateFilter.ts
@@ -1,6 +1,6 @@
 import { CrudFilters, LogicalFilter, ConditionalFilter } from "@refinedev/core";
 import { mapOperator } from "./mapOperator";
-import { stringify, parse } from "qs";
+import qs from "qs";
 
 export const generateNestedFilterField = (field: string) => {
   const fields = field.split(".");
@@ -77,9 +77,9 @@ export const generateFilter = (filters?: CrudFilters) => {
     });
   }
 
-  const parsedQuery = parse(rawQuery, { depth: 15 });
+  const parsedQuery = qs.parse(rawQuery, { depth: 15 });
 
-  const queryFilters = stringify(parsedQuery, { encodeValuesOnly: true });
+  const queryFilters = qs.stringify(parsedQuery, { encodeValuesOnly: true });
 
   return queryFilters;
 };