Merge pull request #3178 from pyth-network/bduran/fix-nuqs

benduran · web-flow · commit 080ad12618be · 2025-11-06T16:40:11.000Z
fix: fixed nuqs usage by doing a pass-through export from a new package and clamping package to ESM
diff --git a/apps/developer-hub/package.json b/apps/developer-hub/package.json
@@ -35,7 +35,7 @@
     "katex": "catalog:",
     "next": "catalog:",
     "next-themes": "catalog:",
-    "nuqs": "catalog:",
+    "@pythnetwork/react-hooks": "workspace:",
     "react": "catalog:",
     "react-aria": "catalog:",
     "react-dom": "catalog:",
@@ -72,4 +72,4 @@
     "tailwindcss": "^4.1.6",
     "vercel": "catalog:"
   }
-}
+}
diff --git a/apps/developer-hub/src/components/Root/index.tsx b/apps/developer-hub/src/components/Root/index.tsx
@@ -1,6 +1,6 @@
 import { RootProviders } from "@pythnetwork/component-library/AppShell";
+import { NuqsAdapter } from "@pythnetwork/react-hooks/nuqs-adapters-next";
 import { RootProvider as FumadocsRootProvider } from "fumadocs-ui/provider";
-import { NuqsAdapter } from "nuqs/adapters/next/app";
 import type { ReactNode } from "react";
 
 import "./global.css";
diff --git a/apps/entropy-explorer/package.json b/apps/entropy-explorer/package.json
@@ -24,7 +24,7 @@
     "@pythnetwork/component-library": "workspace:*",
     "clsx": "catalog:",
     "next": "catalog:",
-    "nuqs": "catalog:",
+    "@pythnetwork/react-hooks": "workspace:",
     "react": "catalog:",
     "react-aria": "catalog:",
     "react-dom": "catalog:",
@@ -52,4 +52,4 @@
     "stylelint-config-standard-scss": "catalog:",
     "vercel": "catalog:"
   }
-}
+}
diff --git a/apps/entropy-explorer/src/components/Root/index.tsx b/apps/entropy-explorer/src/components/Root/index.tsx
@@ -1,5 +1,5 @@
 import { AppShell } from "@pythnetwork/component-library/AppShell";
-import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { NuqsAdapter } from "@pythnetwork/react-hooks/nuqs-adapters-next";
 import type { ReactNode } from "react";
 
 import {
diff --git a/apps/insights/package.json b/apps/insights/package.json
@@ -40,7 +40,7 @@
     "motion": "catalog:",
     "next": "catalog:",
     "next-themes": "catalog:",
-    "nuqs": "catalog:",
+    "@pythnetwork/react-hooks": "workspace:",
     "react": "catalog:",
     "react-aria": "catalog:",
     "react-dom": "catalog:",
@@ -73,4 +73,4 @@
     "stylelint-config-standard-scss": "catalog:",
     "vercel": "catalog:"
   }
-}
+}
diff --git a/apps/insights/src/components/PriceComponentDrawer/index.tsx b/apps/insights/src/components/PriceComponentDrawer/index.tsx
@@ -12,10 +12,10 @@ import type { Button as UnstyledButton } from "@pythnetwork/component-library/un
 import { StateType, useData } from "@pythnetwork/component-library/useData";
 import { useDrawer } from "@pythnetwork/component-library/useDrawer";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
+import { parseAsString, useQueryState } from "@pythnetwork/react-hooks/nuqs";
 import { useMountEffect } from "@react-hookz/web";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
-import { parseAsString, useQueryState } from "nuqs";
 import type { ReactNode } from "react";
 import {
   Suspense,
diff --git a/apps/insights/src/components/PriceComponentsCard/index.tsx b/apps/insights/src/components/PriceComponentsCard/index.tsx
@@ -17,8 +17,12 @@ import type {
 import { Table } from "@pythnetwork/component-library/Table";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
 import { useQueryParamFilterPagination } from "@pythnetwork/component-library/useQueryParamsPagination";
+import {
+  useQueryState,
+  parseAsStringEnum,
+  parseAsBoolean,
+} from "@pythnetwork/react-hooks/nuqs";
 import clsx from "clsx";
-import { useQueryState, parseAsStringEnum, parseAsBoolean } from "nuqs";
 import type { ReactNode } from "react";
 import { Fragment, Suspense, useMemo, useCallback } from "react";
 import { useFilter, useCollator } from "react-aria";
diff --git a/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx b/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx
@@ -1,4 +1,7 @@
-import { parseAsStringLiteral, useQueryState } from "nuqs";
+import {
+  parseAsStringLiteral,
+  useQueryState,
+} from "@pythnetwork/react-hooks/nuqs";
 
 export const RESOLUTIONS = ["1s", "1m", "5m", "1H", "1D"] as const;
 export type Resolution = (typeof RESOLUTIONS)[number];
diff --git a/apps/insights/src/components/PriceFeed/publishers-card.tsx b/apps/insights/src/components/PriceFeed/publishers-card.tsx
@@ -2,7 +2,7 @@
 
 import { Switch } from "@pythnetwork/component-library/Switch";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
-import { useQueryState, parseAsBoolean } from "nuqs";
+import { useQueryState, parseAsBoolean } from "@pythnetwork/react-hooks/nuqs";
 import { Suspense, useCallback, useMemo } from "react";
 
 import { Cluster } from "../../services/pyth";
diff --git a/apps/insights/src/components/PriceFeeds/asset-class-table.tsx b/apps/insights/src/components/PriceFeeds/asset-class-table.tsx
@@ -4,13 +4,13 @@ import { Badge } from "@pythnetwork/component-library/Badge";
 import { Table } from "@pythnetwork/component-library/Table";
 import { useDrawer } from "@pythnetwork/component-library/useDrawer";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
-import { usePathname } from "next/navigation";
 import {
   parseAsString,
   parseAsInteger,
   useQueryStates,
   createSerializer,
-} from "nuqs";
+} from "@pythnetwork/react-hooks/nuqs";
+import { usePathname } from "next/navigation";
 import { useMemo } from "react";
 import { useCollator } from "react-aria";
 
diff --git a/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx b/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx
@@ -16,8 +16,8 @@ import type {
 import { Table } from "@pythnetwork/component-library/Table";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
 import { useQueryParamFilterPagination } from "@pythnetwork/component-library/useQueryParamsPagination";
+import { parseAsString, useQueryState } from "@pythnetwork/react-hooks/nuqs";
 import { matchSorter } from "match-sorter";
-import { parseAsString, useQueryState } from "nuqs";
 import type { ReactNode } from "react";
 import { Suspense, useCallback, useMemo } from "react";
 import { useCollator } from "react-aria";
diff --git a/apps/insights/src/components/Publishers/publishers-card.tsx b/apps/insights/src/components/Publishers/publishers-card.tsx
@@ -17,8 +17,11 @@ import type {
 import { Table } from "@pythnetwork/component-library/Table";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
 import { useQueryParamFilterPagination } from "@pythnetwork/component-library/useQueryParamsPagination";
+import {
+  useQueryState,
+  parseAsStringEnum,
+} from "@pythnetwork/react-hooks/nuqs";
 import clsx from "clsx";
-import { useQueryState, parseAsStringEnum } from "nuqs";
 import type { ReactNode } from "react";
 import { Suspense, useMemo, useCallback } from "react";
 import { useFilter, useCollator } from "react-aria";
diff --git a/apps/insights/src/components/Root/index.tsx b/apps/insights/src/components/Root/index.tsx
@@ -1,6 +1,6 @@
 import { AppShell } from "@pythnetwork/component-library/AppShell";
 import { lookup as lookupPublisher } from "@pythnetwork/known-publishers";
-import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { NuqsAdapter } from "@pythnetwork/react-hooks/nuqs-adapters-next";
 import type { ReactNode } from "react";
 
 import { SearchButton as SearchButtonImpl } from "./search-button";
diff --git a/governance/xc_admin/packages/xc_admin_frontend/components/tabs/Proposals/Proposals.tsx b/governance/xc_admin/packages/xc_admin_frontend/components/tabs/Proposals/Proposals.tsx
@@ -3,10 +3,13 @@
 /* eslint-disable @typescript-eslint/no-deprecated */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 import { Menu, Transition } from '@headlessui/react'
+import {
+  useQueryState,
+  parseAsStringLiteral,
+} from '@pythnetwork/react-hooks/nuqs'
 import { useWallet } from '@solana/wallet-adapter-react'
 import type { TransactionAccount } from '@sqds/mesh/lib/types'
 import { useRouter } from 'next/router'
-import { useQueryState, parseAsStringLiteral } from 'nuqs'
 import { useContext, useEffect, useState, useMemo, Fragment } from 'react'
 
 import { Proposal } from './Proposal'
diff --git a/governance/xc_admin/packages/xc_admin_frontend/package.json b/governance/xc_admin/packages/xc_admin_frontend/package.json
@@ -38,7 +38,7 @@
     "message_buffer": "workspace:^",
     "next": "catalog:",
     "next-seo": "^5.15.0",
-    "nuqs": "catalog:",
+    "@pythnetwork/react-hooks": "workspace:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-hot-toast": "^2.4.0",
@@ -62,4 +62,4 @@
     "tailwindcss": "^3.1.8",
     "vercel": "^37.12.1"
   }
-}
+}
diff --git a/governance/xc_admin/packages/xc_admin_frontend/pages/_app.tsx b/governance/xc_admin/packages/xc_admin_frontend/pages/_app.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable n/no-process-env */
+import { NuqsAdapter } from '@pythnetwork/react-hooks/nuqs-adapters-next'
 import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
 import {
   ConnectionProvider,
@@ -18,7 +19,6 @@ import { clusterApiUrl } from '@solana/web3.js'
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
 import { DefaultSeo } from 'next-seo'
-import { NuqsAdapter } from 'nuqs/adapters/next/pages'
 import { useMemo } from 'react'
 import { Toaster } from 'react-hot-toast'
 
diff --git a/packages/component-library/package.json b/packages/component-library/package.json
@@ -338,7 +338,7 @@
     "modern-normalize": "catalog:",
     "motion": "catalog:",
     "next-themes": "catalog:",
-    "nuqs": "catalog:",
+    "@pythnetwork/react-hooks": "workspace:",
     "pino": "catalog:",
     "react-aria": "catalog:",
     "react-aria-components": "catalog:",
diff --git a/packages/component-library/src/useQueryParamsPagination/index.ts b/packages/component-library/src/useQueryParamsPagination/index.ts
@@ -1,13 +1,13 @@
 "use client";
 
-import { usePathname } from "next/navigation";
 import {
   parseAsString,
   parseAsInteger,
   parseAsBoolean,
   useQueryStates,
   createSerializer,
-} from "nuqs";
+} from "@pythnetwork/react-hooks/nuqs";
+import { usePathname } from "next/navigation";
 import { useCallback, useMemo } from "react";
 
 import type { SortDescriptor } from "../unstyled/Table";
diff --git a/packages/react-hooks/.gitignore b/packages/react-hooks/.gitignore
@@ -0,0 +1,22 @@
+# Coverage directory used by tools like istanbul
+coverage
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variables file
+.env
+
+# Build directory
+dist/
+
+tsconfig.tsbuildinfo
diff --git a/packages/react-hooks/.prettierignore b/packages/react-hooks/.prettierignore
@@ -0,0 +1,12 @@
+.vscode/
+coverage/
+dist/
+doc/
+doc*/
+node_modules/
+dist/
+lib/
+build/
+node_modules/
+package.json
+tsconfig*.json
diff --git a/packages/react-hooks/eslint.config.js b/packages/react-hooks/eslint.config.js
@@ -0,0 +1 @@
+export { base as default } from "@cprussin/eslint-config";
diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
@@ -0,0 +1,47 @@
+{
+  "private": true,
+  "name": "@pythnetwork/react-hooks",
+  "description": "collection of utility hooks used across react applications powering parts of the pyth network",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "ts-duality --clean --noCjs",
+    "clean": "rm -rf ./dist",
+    "fix:format": "prettier --write .",
+    "fix:lint": "eslint --fix . --max-warnings 0",
+    "test:lint": "eslint . --max-warnings 0",
+    "test:format": "prettier --check .",
+    "test:types": "tsc"
+  },
+  "devDependencies": {
+    "@cprussin/eslint-config": "catalog:",
+    "@cprussin/tsconfig": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "eslint": "catalog:"
+  },
+  "dependencies": {
+    "nuqs": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "type": "module",
+  "exports": {
+    "./nuqs-adapters-next": {
+      "types": "./dist/nuqs-adapters-next.d.ts",
+      "default": "./dist/nuqs-adapters-next.mjs"
+    },
+    "./nuqs-server": {
+      "types": "./dist/nuqs-server.d.ts",
+      "default": "./dist/nuqs-server.mjs"
+    },
+    "./nuqs-testing": {
+      "types": "./dist/nuqs-testing.d.ts",
+      "default": "./dist/nuqs-testing.mjs"
+    },
+    "./nuqs": {
+      "types": "./dist/nuqs.d.ts",
+      "default": "./dist/nuqs.mjs"
+    },
+    "./package.json": "./package.json"
+  }
+}
diff --git a/packages/react-hooks/src/nuqs-adapters-next.ts b/packages/react-hooks/src/nuqs-adapters-next.ts
@@ -0,0 +1 @@
+export * from "nuqs/adapters/next";
diff --git a/packages/react-hooks/src/nuqs-server.ts b/packages/react-hooks/src/nuqs-server.ts
@@ -0,0 +1 @@
+export * from "nuqs/server";
diff --git a/packages/react-hooks/src/nuqs-testing.ts b/packages/react-hooks/src/nuqs-testing.ts
@@ -0,0 +1 @@
+export * from "nuqs/testing";
diff --git a/packages/react-hooks/src/nuqs.ts b/packages/react-hooks/src/nuqs.ts
@@ -0,0 +1,9 @@
+// this file exists as a way to export a single, unified instance of
+// the nuqs library, to prevent the following error:
+// https://nuqs.dev/NUQS-404
+// solutions have been discussed here about using nuqs in a monorepo:
+// https://github.com/47ng/nuqs/issues/798
+// NOTE: this helps prevent mixed ESM and CJS usages of the hooks and context providers,
+// which is likely what causes the issue in bundler environments that support both
+// and aren't strictly opinionated about CJS vs ESM
+export * from "nuqs";
diff --git a/packages/react-hooks/tsconfig.build.json b/packages/react-hooks/tsconfig.build.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "incremental": false,
+    "noEmit": false
+  }
+}
diff --git a/packages/react-hooks/tsconfig.json b/packages/react-hooks/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@cprussin/tsconfig/base.json",
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
