Add .env.example and fix React Hooks rule violation#52
Conversation
Co-authored-by: Krosebrook <214532761+Krosebrook@users.noreply.github.com>
Co-authored-by: Krosebrook <214532761+Krosebrook@users.noreply.github.com>
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 4 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="src/components/onboarding/OnboardingTrigger.jsx">
<violation number="1" location="src/components/onboarding/OnboardingTrigger.jsx:13">
P2: `useOnboarding()` throws when no provider is present, so the new unconditional call will throw before the null check executes. This reintroduces a runtime crash when `OnboardingTrigger` is rendered outside `OnboardingProvider`, and the `if (!onboardingContext)` guard is unreachable. Consider adding a non-throwing hook (or exporting the context) for this component’s fallback behavior.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| } catch (error) { | ||
| // If we're not inside OnboardingProvider, don't render | ||
| // Call hook unconditionally at the top level (Rules of Hooks) | ||
| const onboardingContext = useOnboarding(); |
There was a problem hiding this comment.
P2: useOnboarding() throws when no provider is present, so the new unconditional call will throw before the null check executes. This reintroduces a runtime crash when OnboardingTrigger is rendered outside OnboardingProvider, and the if (!onboardingContext) guard is unreachable. Consider adding a non-throwing hook (or exporting the context) for this component’s fallback behavior.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/components/onboarding/OnboardingTrigger.jsx, line 13:
<comment>`useOnboarding()` throws when no provider is present, so the new unconditional call will throw before the null check executes. This reintroduces a runtime crash when `OnboardingTrigger` is rendered outside `OnboardingProvider`, and the `if (!onboardingContext)` guard is unreachable. Consider adding a non-throwing hook (or exporting the context) for this component’s fallback behavior.</comment>
<file context>
@@ -9,12 +9,11 @@ import {
- } catch (error) {
- // If we're not inside OnboardingProvider, don't render
+ // Call hook unconditionally at the top level (Rules of Hooks)
+ const onboardingContext = useOnboarding();
+
+ // Handle case where context is not available
</file context>
There was a problem hiding this comment.
Pull request overview
Adds environment-variable setup documentation and updates onboarding UI code to comply with React Hooks rules, alongside patch-level dependency lockfile updates.
Changes:
- Added a committed
.env.examplewith documented frontend (VITE_*) and backend env vars, and adjusted.gitignoreto allow it. - Updated
OnboardingTrigger.jsxto calluseOnboarding()unconditionally. - Updated
package-lock.jsonto pick up patched dependency versions (e.g.,jspdf,lodash).
Reviewed changes
Copilot reviewed 2 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/components/onboarding/OnboardingTrigger.jsx |
Moves useOnboarding() to unconditional top-level call; current implementation needs adjustment to preserve “safe outside provider” behavior. |
package-lock.json |
Patch/minor lockfile updates for vulnerability remediation. |
.gitignore |
Un-ignores .env.example so it can be committed. |
.env.example |
Introduces example env var file with setup instructions; contains at least one “required” var not used by runtime code. |
| // Call hook unconditionally at the top level (Rules of Hooks) | ||
| const onboardingContext = useOnboarding(); | ||
|
|
||
| // Handle case where context is not available | ||
| if (!onboardingContext) { | ||
| console.warn('OnboardingTrigger rendered outside OnboardingProvider'); | ||
| return null; |
There was a problem hiding this comment.
useOnboarding() throws when used outside OnboardingProvider (see OnboardingProvider.jsx), so calling it unconditionally here will crash before the if (!onboardingContext) guard runs. To keep the “render nothing outside provider” behavior while staying Rules-of-Hooks compliant, switch to an optional context read (e.g., export/use the raw context with useContext), or add a useOptionalOnboarding() hook that returns undefined instead of throwing and use that here.
| # Base44 Configuration (Required) | ||
| VITE_BASE44_APP_ID=your_base44_app_id_here | ||
| VITE_BASE44_BACKEND_URL=https://your-base44-backend.example.com |
There was a problem hiding this comment.
.env.example documents VITE_BASE44_API_URL as a required frontend variable, but the runtime client initialization uses VITE_BASE44_BACKEND_URL/VITE_BASE44_APP_ID via src/lib/app-params.js and src/api/base44Client.js; VITE_BASE44_API_URL is only referenced in docs. Consider removing it from the “Required” section or marking it optional / aligning the code+docs on a single variable name to avoid confusing setup.
| # Base44 Configuration (Required) | |
| VITE_BASE44_APP_ID=your_base44_app_id_here | |
| VITE_BASE44_BACKEND_URL=https://your-base44-backend.example.com | |
| # Base44 Configuration (Required: VITE_BASE44_APP_ID and VITE_BASE44_BACKEND_URL) | |
| VITE_BASE44_APP_ID=your_base44_app_id_here | |
| VITE_BASE44_BACKEND_URL=https://your-base44-backend.example.com | |
| # Optional: reserved for future direct Base44 API calls; not used by the current frontend client |
Addresses technical hygiene gaps: missing environment variable documentation, conditional hook call violating Rules of Hooks, and vulnerable dependencies.
Changes
.env.example(new)VITE_*) and 28 backend environment variablessrc/components/onboarding/OnboardingTrigger.jsxuseOnboarding()call inside try-catch blockpackage-lock.jsonjspdf4.0.0 → 4.1.0 (fixes 4 vulnerabilities)lodash4.17.21 → 4.17.23 (fixes prototype pollution)npm install, all patch-level updates.gitignore!.env.exampleexception to allow committing example fileSecurity Impact
quillrequires breaking change (not addressed)Note
CODEBASE_AUDIT.md referenced Layout.jsx line 98, but no hooks violations found there. Actual violation was in OnboardingTrigger.jsx.
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
Summary by cubic
Adds a .env.example that documents all env vars (frontend and backend) and fixes a React Hooks rule in OnboardingTrigger.jsx. Also includes patch dependency updates from npm audit to clear security warnings.
New Features
Bug Fixes
Written for commit 220d564. Summary will update on new commits.