fix(init-prompt): require StackProvider for all frameworks#1374
Conversation
…React The previous prompt marked the StackProvider step as 'React only' and placed it after the StackHandler step. Following these instructions for a Next.js project produced a layout without a provider, causing StackHandler to crash at runtime with 'useStackApp must be used within a StackProvider'. Make the provider step unconditional, move it before the handler step so the dependency order matches the instruction order, and call out the exact error message so the model won't skip it.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe init prompt in Changes
Sequence Diagram(s)(omitted — changes are prompt/text-only and do not introduce multi-component control flow) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Greptile SummaryThis PR fixes the Confidence Score: 5/5Safe to merge — the only remaining finding is a minor P2 import comment inconsistency that does not affect runtime behavior. The fix is a targeted, correct reordering of prompt instructions with no logic changes. All remaining findings are P2 style suggestions. No files require special attention. Important Files Changed
Sequence DiagramsequenceDiagram
participant Dev as Developer
participant Prompt as init-prompt instructions
participant App as Next.js / React App
Dev->>Prompt: Follow step 3 (StackProvider)
Prompt->>App: Wrap root layout with StackProvider + StackTheme
Dev->>Prompt: Follow step 4 (StackHandler)
Prompt->>App: Add /handler/[...stack]/page.tsx using StackHandler
Note over App: StackHandler finds StackProvider in tree ✓
App-->>Dev: No "useStackApp must be used within a StackProvider" error
Prompt To Fix All With AIThis is a comment left during a code review.
Path: packages/stack-shared/src/helpers/init-prompt.ts
Line: 72-75
Comment:
**Import package not updated for all frameworks**
Step 3 now explicitly applies to all frameworks, but the import snippet still hard-codes `@stackframe/stack`. React/Vite users need `@stackframe/react` instead. Since step 1 already differentiates the package per framework, the provider import should mirror that or add a comment.
```suggestion
import { StackProvider, StackTheme } from "@stackframe/stack"; // or "@stackframe/react" for React/Vite
import { stackClientApp } from "../stack/client"; // adjust relative path
```
How can I resolve this? If you propose a fix, please make it concise.Reviews (1): Last reviewed commit: "fix(init-prompt): require StackProvider ..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/stack-shared/src/helpers/init-prompt.ts`:
- Around line 68-87: Split the single Next.js-specific example into two short
examples: one for Next.js that imports StackProvider/StackTheme from
`@stackframe/stack` and shows passing stackServerApp (since layout.tsx is a server
component) and wrapping the <body>, and a separate React/Vite example that
imports from `@stackframe/react` and shows passing stackClientApp and wrapping the
root component (e.g., in main.tsx/App.tsx) rather than a <body>; update the text
to call out which package to install for each framework and ensure the symbols
StackProvider, StackTheme, stackServerApp, stackClientApp, and the React entry
points (main.tsx/App.tsx) are referenced so readers apply the correct import and
wrapper for their environment.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c65f1dc3-743e-4be3-b197-9cee2ce48619
📒 Files selected for processing (1)
packages/stack-shared/src/helpers/init-prompt.ts
|
Promptless prepared a documentation update related to this change. Triggered by PR #1374 Reordered the manual installation steps so "Add providers" (StackProvider) comes before "Set up authentication handlers" (StackHandler). Without this order, users following the docs would hit a runtime error: "useStackApp must be used within a StackProvider". Review: Fix setup step ordering |
2 participants
Summary
StackProviderstep as React only and placed it after theStackHandlerstep. Following it on a Next.js project produced a layout with no provider, soStackHandlercrashed at runtime withuseStackApp must be used within a StackProvider.Test plan
npx @stackframe/stack-cli init(or the web flow) against a fresh Next.js app and confirm/handler/[...stack]renders without theuseStackApperror.Summary by CodeRabbit