router` shim #403

New issue

Closed

opened 2026-05-06 12:39:38 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 12:39:38 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/224
Author: @wobsoriano
Created: 3/2/2026
Status: ✅ Merged
Merged: 3/3/2026
Merged by: @southpolesteve

Base: main ← Head: rob/esm-router-compat

📝 Commits (3)

500f55d feat: Add next/compat/router shim
d71c87b chore: update doc
c2a53d6 Apply suggestion from @ask-bonk[bot]

📊 Changes

3 files changed (+36 additions, -0 deletions)

View changed files

📝 packages/vinext/src/index.ts (+1 -0)
➕ packages/vinext/src/shims/compat-router.ts (+23 -0)
📝 tests/shims.test.ts (+12 -0)

📄 Description

Adds a new compat-router shim for next/compat/router, the public Next.js API intended for components shared between Pages Router and App Router.

@clerk/nextjs (ref) import from next/compat/router. The next/compat/router package entry is CJS (module.exports = require(...)), which Vite cannot extract named ESM exports from — causing a "does not provide an export named 'useRouter'" error at runtime. Adding a native ESM shim in vinext resolves this without requiring apps to add a resolve.alias workaround.

Temporary fix:

// vite.config.ts

resolve: {
  alias: {
    // next/compat/router ships a CJS entry; alias to the ESM version instead.
    "next/compat/router": resolve("./node_modules/next/dist/esm/client/compat/router.js"),
  },
},

Locally tested via pnpm link

_{🔄 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/224 **Author:** [@wobsoriano](https://github.com/wobsoriano) **Created:** 3/2/2026 **Status:** ✅ Merged **Merged:** 3/3/2026 **Merged by:** [@southpolesteve](https://github.com/southpolesteve) **Base:** `main` ← **Head:** `rob/esm-router-compat` --- ### 📝 Commits (3) - [`500f55d`](https://github.com/cloudflare/vinext/commit/500f55da862fdb514b27720b737c48872a695e4c) feat: Add next/compat/router shim - [`d71c87b`](https://github.com/cloudflare/vinext/commit/d71c87ba639ac309a68786a3198877ed1ebd1d6d) chore: update doc - [`c2a53d6`](https://github.com/cloudflare/vinext/commit/c2a53d6b6cbb2436cd2888a042747b602416b0e9) Apply suggestion from @ask-bonk[bot] ### 📊 Changes **3 files changed** (+36 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `packages/vinext/src/index.ts` (+1 -0) ➕ `packages/vinext/src/shims/compat-router.ts` (+23 -0) 📝 `tests/shims.test.ts` (+12 -0) </details> ### 📄 Description Adds a new `compat-router` shim for [`next/compat/router`](https://nextjs.org/docs/pages/api-reference/functions/use-router#the-nextcompatrouter-export), the public Next.js API intended for components shared between Pages Router and App Router. `@clerk/nextjs` ([ref](https://github.com/clerk/javascript/blob/21c96e8d498d9e6bbf238aa0ed974b5b4515b8f0/packages/nextjs/src/client-boundary/ClerkProvider.tsx#L3)) import from `next/compat/router`. The `next/compat/router` package entry is CJS (`module.exports = require(...)`), which Vite cannot extract named ESM exports from — causing a "does not provide an export named 'useRouter'" error at runtime. Adding a native ESM shim in vinext resolves this without requiring apps to add a `resolve.alias` workaround. Temporary fix: ```ts // vite.config.ts resolve: { alias: { // next/compat/router ships a CJS entry; alias to the ESM version instead. "next/compat/router": resolve("./node_modules/next/dist/esm/client/compat/router.js"), }, }, ``` Locally tested via `pnpm link` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>