feat(sdk-react): ship ssr-safe hooks for next.js app router#162
Open
DSOTec wants to merge 1 commit into
Open
Conversation
hooks.ts had no "use client" pragma, so any Next.js App Router Server Component tree that reached it failed to build with "you're importing a component that needs useState." Add the pragma to the source and pin it as a tsup banner so it survives bundling into both the ESM and CJS dist output regardless of esbuild's directive-hoisting behavior. Add examples/stellar-nextjs-app-router to demonstrate the fix: a Server Component page renders a client boundary component that calls the hooks, and `next build` now completes without SSR errors. Building the example against the real (non-mocked) package surfaced a second bug: hooks.ts still called `fetchAnnouncements`, which was renamed to `fetchAnnouncementsStream` a while back. The package's env.d.ts shadowed the real SDK types with `any`-typed ambient declarations, so neither tsc nor the mocked hook tests caught the drift. Update the scan hook to consume the async generator and delete env.d.ts so the package type-checks against the SDK's real exports going forward. Closes wraith-protocol#130
|
@DSOTec Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
hooks.tshad no"use client"pragma, so any Next.js App Router Server Component tree that imported@wraith-protocol/sdk-reactfailednext buildwith "you're importing a component that needs useState." Added the pragma to the source and pinned it as a tsupbannerso it survives bundling into both ESM and CJSdist/output.examples/stellar-nextjs-app-router/: a Server Component page renders a client-boundary component that calls the hooks, provingnext buildcompletes without SSR errors. Wired it into the Examples CI matrix.hooks.tsstill calledfetchAnnouncements, renamed tofetchAnnouncementsStreama while back. The package'senv.d.tsshadowed the real SDK types withany-typed ambient declarations, hiding the drift from bothtscand the mocked hook tests. Updated the scan hook to consume the async generator and deletedenv.d.tsso the package now type-checks against the SDK's real exports.Testing
pnpm format:check,pnpm build,pnpm test(990 passed) at the repo rootnext buildon the new example — succeeds, statically prerenders/, no SSR errors"use client"is the first line of bothpackages/sdk-react/dist/index.jsanddist/index.cjsreact-stellar-app,stellar-react-receive) still buildCloses #130