[PR #835] [MERGED] fix: return error for client hook used without directive #884

New issue

Closed

opened 2026-05-06 13:10:39 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 13:10:39 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/835
Author: @james-elicx
Created: 4/13/2026
Status: ✅ Merged
Merged: 4/13/2026
Merged by: @james-elicx

Base: main ← Head: james/error-use-client

📝 Commits (2)

bb12f88 fix: display error for client hook without directive
0961b4f fix

📊 Changes

6 files changed (+173 additions, -6 deletions)

View changed files

📝 packages/vinext/src/index.ts (+50 -2)
➕ packages/vinext/src/shims/client-hook-error.ts (+15 -0)
➕ packages/vinext/src/shims/navigation.react-server.ts (+72 -0)
📝 packages/vinext/src/shims/navigation.ts (+0 -4)
📝 tests/app-router.test.ts (+15 -0)
➕ tests/fixtures/app-basic/app/missing-use-client-test/page.tsx (+21 -0)

📄 Description

fixes #834

Summary

Hooks like usePathname() from next/navigation now throw a clear error when called from a Server Component without the "use client" directive, matching Next.js behavior
Previously these hooks silently returned fallback values, making the root cause extremely difficult to diagnose
Uses the same react-server export condition pattern as Next.js: the RSC Vite environment resolves next/navigation to a server-safe variant that provides error-throwing stubs for client-only hooks

Approach
A new navigation.react-server.ts shim re-exports server-safe APIs (redirect, notFound, setNavigationContext, etc.) from the canonical navigation.ts and adds error-throwing stubs for client-only hooks. The resolveId hook routes next/navigation to this variant in the RSC environment and to the full shim elsewhere.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cloudflare/vinext/pull/835 **Author:** [@james-elicx](https://github.com/james-elicx) **Created:** 4/13/2026 **Status:** ✅ Merged **Merged:** 4/13/2026 **Merged by:** [@james-elicx](https://github.com/james-elicx) **Base:** `main` ← **Head:** `james/error-use-client` --- ### 📝 Commits (2) - [`bb12f88`](https://github.com/cloudflare/vinext/commit/bb12f88d2d899f86a2b5015cca71a45090ff3ccc) fix: display error for client hook without directive - [`0961b4f`](https://github.com/cloudflare/vinext/commit/0961b4f5391055a10f93d3e7ebed99b9030cb7cf) fix ### 📊 Changes **6 files changed** (+173 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `packages/vinext/src/index.ts` (+50 -2) ➕ `packages/vinext/src/shims/client-hook-error.ts` (+15 -0) ➕ `packages/vinext/src/shims/navigation.react-server.ts` (+72 -0) 📝 `packages/vinext/src/shims/navigation.ts` (+0 -4) 📝 `tests/app-router.test.ts` (+15 -0) ➕ `tests/fixtures/app-basic/app/missing-use-client-test/page.tsx` (+21 -0) </details> ### 📄 Description fixes #834 **Summary** - Hooks like usePathname() from next/navigation now throw a clear error when called from a Server Component without the "use client" directive, matching Next.js behavior - Previously these hooks silently returned fallback values, making the root cause extremely difficult to diagnose - Uses the same react-server export condition pattern as Next.js: the RSC Vite environment resolves next/navigation to a server-safe variant that provides error-throwing stubs for client-only hooks **Approach** A new navigation.react-server.ts shim re-exports server-safe APIs (redirect, notFound, setNavigationContext, etc.) from the canonical navigation.ts and adds error-throwing stubs for client-only hooks. The resolveId hook routes next/navigation to this variant in the RSC environment and to the full shim elsewhere. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>