fix(vue): Defer useOrganization environment check until Clerk is loaded#7982
fix(vue): Defer useOrganization environment check until Clerk is loaded#7982wobsoriano merged 3 commits intomainfrom
useOrganization environment check until Clerk is loaded#7982Conversation
🦋 Changeset detectedLatest commit: 0b48248 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
| if (value) { | ||
| // Optional chaining is important for `@clerk/vue` usage with older clerk-js versions that don't have the method | ||
| value.__internal_attemptToEnableEnvironmentSetting?.({ | ||
| clerk.value?.__internal_attemptToEnableEnvironmentSetting?.({ |
There was a problem hiding this comment.
We are confident that clerk is defined here
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe Vue Clerk package was updated to fix premature environment checks in the useOrganization composable by introducing and exposing a reactive 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
| */ | ||
| export const useOrganization: UseOrganization = () => { | ||
| const { clerk, organizationCtx } = useClerkContext('useOrganization'); | ||
| const { loaded, clerk, organizationCtx } = useClerkContext('useOrganization'); |
There was a problem hiding this comment.
This loaded ref is set to true when Clerk.load() succeeds so this is more reliable
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/vue/src/composables/useOrganization.ts (1)
55-105:⚠️ Potential issue | 🟠 MajorAdd regression coverage for this race-condition fix before merge.
This change alters timing-sensitive behavior in
useOrganization, but no tests were added/updated to verify it. Please add a test that asserts the environment-setting check is deferred until Clerk is loaded (and does not run before load completes).As per coding guidelines
**/*: "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/vue/src/composables/useOrganization.ts` around lines 55 - 105, Add a regression test for useOrganization that verifies the environment-setting call clerk.value?.__internal_attemptToEnableEnvironmentSetting is not invoked until loaded becomes true: mock a Clerk instance with a spy on __internal_attemptToEnableEnvironmentSetting, mount or call useOrganization with loaded initially false, assert the spy was not called, then set loaded to true (or emit the watcher) and assert the spy is called once with the expected payload ({ for: 'organizations', caller: 'useOrganization' }); place the test alongside other vue composable tests and use the same mocking utilities used elsewhere for clerk/session so it runs deterministically in CI.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@packages/vue/src/composables/useOrganization.ts`:
- Around line 55-105: Add a regression test for useOrganization that verifies
the environment-setting call
clerk.value?.__internal_attemptToEnableEnvironmentSetting is not invoked until
loaded becomes true: mock a Clerk instance with a spy on
__internal_attemptToEnableEnvironmentSetting, mount or call useOrganization with
loaded initially false, assert the spy was not called, then set loaded to true
(or emit the watcher) and assert the spy is called once with the expected
payload ({ for: 'organizations', caller: 'useOrganization' }); place the test
alongside other vue composable tests and use the same mocking utilities used
elsewhere for clerk/session so it runs deterministically in CI.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: ba872d41-0b8c-43ed-8867-1595f0889885
📒 Files selected for processing (4)
.changeset/breezy-stingrays-give.mdpackages/vue/src/composables/useOrganization.tspackages/vue/src/plugin.tspackages/vue/src/types.ts
|
!snapshot |
|
Hey @wobsoriano - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.3.2-snapshot.v20260304234655 --save-exact
npm i @clerk/astro@3.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/backend@3.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/chrome-extension@3.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/clerk-js@6.0.1-snapshot.v20260304234655 --save-exact
npm i @clerk/dev-cli@0.1.1-snapshot.v20260304234655 --save-exact
npm i @clerk/expo@3.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/expo-passkeys@1.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/express@2.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/fastify@3.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/hono@0.0.4-snapshot.v20260304234655 --save-exact
npm i @clerk/localizations@4.0.1-snapshot.v20260304234655 --save-exact
npm i @clerk/msw@0.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/nextjs@7.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/nuxt@2.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/react@6.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/react-router@3.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/shared@4.0.1-snapshot.v20260304234655 --save-exact
npm i @clerk/tanstack-react-start@1.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/testing@2.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/ui@1.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/upgrade@2.0.2-snapshot.v20260304234655 --save-exact
npm i @clerk/vue@2.0.2-snapshot.v20260304234655 --save-exact |
3 participants
Description
useOrganizationchecked environment settings beforeClerk.load()resolved, causing the "Organizations feature required" dialog to appear (even when organizations is enabled, and a session is active)loadedref from the plugin context instead of theclerkrefChecklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
Bug Fixes
New Features
Tests