fix(vue): Set initial value of `clientCtx` to `undefined` by Dorilama · Pull Request #5324 · clerk/javascript

Dorilama · 2025-03-11T10:25:57Z

Description

Fixes UsesessionList bug: when clientCtx is defined clerk can be null and the composable throws when trying to access clerk.value.setActive.
The error can be reproduced in this project on stackblitz
Fixed by adding a condition to return the default values also when clerk.value is null.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-03-11T10:26:01Z

🦋 Changeset detected

Latest commit: 7517f9c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/vue	Patch
@clerk/nuxt	Patch

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

vercel · 2025-03-11T10:26:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 11, 2025 8:22pm

panteliselef · 2025-03-11T10:45:20Z

+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@wobsoriano Clerk being null while clientCtx is defined seems like an invalid state. I'd expect the existing code to work as expected, which makes me that there is another underlying cause for this issue.

FYI the issue was client resource was initially set to an empty object. See my comment here.
This one now looks good!

wobsoriano · 2025-03-11T14:23:13Z

Hi @Dorilama! Thanks for the PR and reproduction.

As @panteliselef mentioned, having clientCtx defined while clerk is null is indeed an invalid state.

While our React useSessionList() hook has the same logic as the Vue one's, it utilizes an extended Clerk class, specifically the IsomorphicClerk, which allows methods to be called lazily even when clerk is null.

In the Vue implementation, we do not use the IsomorphicClerk, so we should avoid rendering clerk.value!.setActive in useSessionList.ts if clerk.value is null. This PR makes sense, but I'll still need to investigate on why there's a possibility of clientCtx having defined while clerk is null and get back to you shortly!

wobsoriano · 2025-03-11T14:39:32Z


 const result = computed<UseSessionListReturn>(() => {
- if (!clientCtx.value) {
+ if (!clientCtx.value || !clerk.value) {


Okay, the issue is that we have the clientCtx value initially set to an empty object that's why it passes the condition even if clerk is null.
Would you be able to update the initial value to undefined and assert the type for now? (client: undefined as unknown as ClientResource). Then we can merge the PR!
This should be a safe update as we check the value of clerk in all of our composables except useSessionList().
Thanks!

wobsoriano

Thanks so much and very nice catch! 🚀

Dorilama · 2025-03-11T18:09:34Z

thank you for all the work with the sdk :)

panteliselef · 2025-03-11T18:33:13Z

+'@clerk/vue': patch
+---
+
+updating the initial value of `clientCtx` to `undefined` as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)


Suggested change
updating the initial value of `clientCtx` to `undefined`as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)
Bug fix: Update the initial value of `clientCtx` to `undefined`to correctly infer that `clerk` is defined.

panteliselef · 2025-03-11T18:34:06Z

+---
+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@Dorilama Can you please remove this changeset, in favour of the new one ? We should only have one changeset file per package

yes, sorry about that 😅

Dorilama · 2025-03-11T10:25:57Z

Description

Fixes UsesessionList bug: when clientCtx is defined clerk can be null and the composable throws when trying to access clerk.value.setActive.
The error can be reproduced in this project on stackblitz
Fixed by adding a condition to return the default values also when clerk.value is null.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-03-11T10:26:01Z

🦋 Changeset detected

Latest commit: 7517f9c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/vue	Patch
@clerk/nuxt	Patch

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

vercel · 2025-03-11T10:26:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 11, 2025 8:22pm

panteliselef · 2025-03-11T10:45:20Z

+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@wobsoriano Clerk being null while clientCtx is defined seems like an invalid state. I'd expect the existing code to work as expected, which makes me that there is another underlying cause for this issue.

FYI the issue was client resource was initially set to an empty object. See my comment here.
This one now looks good!

wobsoriano · 2025-03-11T14:23:13Z

Hi @Dorilama! Thanks for the PR and reproduction.

As @panteliselef mentioned, having clientCtx defined while clerk is null is indeed an invalid state.

While our React useSessionList() hook has the same logic as the Vue one's, it utilizes an extended Clerk class, specifically the IsomorphicClerk, which allows methods to be called lazily even when clerk is null.

In the Vue implementation, we do not use the IsomorphicClerk, so we should avoid rendering clerk.value!.setActive in useSessionList.ts if clerk.value is null. This PR makes sense, but I'll still need to investigate on why there's a possibility of clientCtx having defined while clerk is null and get back to you shortly!

wobsoriano · 2025-03-11T14:39:32Z


 const result = computed<UseSessionListReturn>(() => {
- if (!clientCtx.value) {
+ if (!clientCtx.value || !clerk.value) {


Okay, the issue is that we have the clientCtx value initially set to an empty object that's why it passes the condition even if clerk is null.
Would you be able to update the initial value to undefined and assert the type for now? (client: undefined as unknown as ClientResource). Then we can merge the PR!
This should be a safe update as we check the value of clerk in all of our composables except useSessionList().
Thanks!

wobsoriano

Thanks so much and very nice catch! 🚀

Dorilama · 2025-03-11T18:09:34Z

thank you for all the work with the sdk :)

panteliselef · 2025-03-11T18:33:13Z

+'@clerk/vue': patch
+---
+
+updating the initial value of `clientCtx` to `undefined` as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)


Suggested change
updating the initial value of `clientCtx` to `undefined`as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)
Bug fix: Update the initial value of `clientCtx` to `undefined`to correctly infer that `clerk` is defined.

panteliselef · 2025-03-11T18:34:06Z

+---
+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@Dorilama Can you please remove this changeset, in favour of the new one ? We should only have one changeset file per package

yes, sorry about that 😅

Dorilama · 2025-03-11T10:25:57Z

Description

Fixes UsesessionList bug: when clientCtx is defined clerk can be null and the composable throws when trying to access clerk.value.setActive.
The error can be reproduced in this project on stackblitz
Fixed by adding a condition to return the default values also when clerk.value is null.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-03-11T10:26:01Z

🦋 Changeset detected

Latest commit: 7517f9c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/vue	Patch
@clerk/nuxt	Patch

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

vercel · 2025-03-11T10:26:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 11, 2025 8:22pm

panteliselef · 2025-03-11T10:45:20Z

+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@wobsoriano Clerk being null while clientCtx is defined seems like an invalid state. I'd expect the existing code to work as expected, which makes me that there is another underlying cause for this issue.

FYI the issue was client resource was initially set to an empty object. See my comment here.
This one now looks good!

wobsoriano · 2025-03-11T14:23:13Z

Hi @Dorilama! Thanks for the PR and reproduction.

As @panteliselef mentioned, having clientCtx defined while clerk is null is indeed an invalid state.

While our React useSessionList() hook has the same logic as the Vue one's, it utilizes an extended Clerk class, specifically the IsomorphicClerk, which allows methods to be called lazily even when clerk is null.

In the Vue implementation, we do not use the IsomorphicClerk, so we should avoid rendering clerk.value!.setActive in useSessionList.ts if clerk.value is null. This PR makes sense, but I'll still need to investigate on why there's a possibility of clientCtx having defined while clerk is null and get back to you shortly!

wobsoriano · 2025-03-11T14:39:32Z


 const result = computed<UseSessionListReturn>(() => {
- if (!clientCtx.value) {
+ if (!clientCtx.value || !clerk.value) {


Okay, the issue is that we have the clientCtx value initially set to an empty object that's why it passes the condition even if clerk is null.
Would you be able to update the initial value to undefined and assert the type for now? (client: undefined as unknown as ClientResource). Then we can merge the PR!
This should be a safe update as we check the value of clerk in all of our composables except useSessionList().
Thanks!

wobsoriano

Thanks so much and very nice catch! 🚀

Dorilama · 2025-03-11T18:09:34Z

thank you for all the work with the sdk :)

panteliselef · 2025-03-11T18:33:13Z

+'@clerk/vue': patch
+---
+
+updating the initial value of `clientCtx` to `undefined` as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)


Suggested change
updating the initial value of `clientCtx` to `undefined`as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)
Bug fix: Update the initial value of `clientCtx` to `undefined`to correctly infer that `clerk` is defined.

panteliselef · 2025-03-11T18:34:06Z

+---
+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@Dorilama Can you please remove this changeset, in favour of the new one ? We should only have one changeset file per package

yes, sorry about that 😅

Dorilama · 2025-03-11T10:25:57Z

Description

Fixes UsesessionList bug: when clientCtx is defined clerk can be null and the composable throws when trying to access clerk.value.setActive.
The error can be reproduced in this project on stackblitz
Fixed by adding a condition to return the default values also when clerk.value is null.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-03-11T10:26:01Z

🦋 Changeset detected

Latest commit: 7517f9c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/vue	Patch
@clerk/nuxt	Patch

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

vercel · 2025-03-11T10:26:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 11, 2025 8:22pm

panteliselef · 2025-03-11T10:45:20Z

+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@wobsoriano Clerk being null while clientCtx is defined seems like an invalid state. I'd expect the existing code to work as expected, which makes me that there is another underlying cause for this issue.

FYI the issue was client resource was initially set to an empty object. See my comment here.
This one now looks good!

wobsoriano · 2025-03-11T14:23:13Z

Hi @Dorilama! Thanks for the PR and reproduction.

As @panteliselef mentioned, having clientCtx defined while clerk is null is indeed an invalid state.

While our React useSessionList() hook has the same logic as the Vue one's, it utilizes an extended Clerk class, specifically the IsomorphicClerk, which allows methods to be called lazily even when clerk is null.

In the Vue implementation, we do not use the IsomorphicClerk, so we should avoid rendering clerk.value!.setActive in useSessionList.ts if clerk.value is null. This PR makes sense, but I'll still need to investigate on why there's a possibility of clientCtx having defined while clerk is null and get back to you shortly!

wobsoriano · 2025-03-11T14:39:32Z


 const result = computed<UseSessionListReturn>(() => {
- if (!clientCtx.value) {
+ if (!clientCtx.value || !clerk.value) {


Okay, the issue is that we have the clientCtx value initially set to an empty object that's why it passes the condition even if clerk is null.
Would you be able to update the initial value to undefined and assert the type for now? (client: undefined as unknown as ClientResource). Then we can merge the PR!
This should be a safe update as we check the value of clerk in all of our composables except useSessionList().
Thanks!

wobsoriano

Thanks so much and very nice catch! 🚀

Dorilama · 2025-03-11T18:09:34Z

thank you for all the work with the sdk :)

panteliselef · 2025-03-11T18:33:13Z

+'@clerk/vue': patch
+---
+
+updating the initial value of `clientCtx` to `undefined` as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)


Suggested change
updating the initial value of `clientCtx` to `undefined`as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)
Bug fix: Update the initial value of `clientCtx` to `undefined`to correctly infer that `clerk` is defined.

panteliselef · 2025-03-11T18:34:06Z

+---
+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@Dorilama Can you please remove this changeset, in favour of the new one ? We should only have one changeset file per package

yes, sorry about that 😅

Dorilama · 2025-03-11T10:25:57Z

Description

Fixes UsesessionList bug: when clientCtx is defined clerk can be null and the composable throws when trying to access clerk.value.setActive.
The error can be reproduced in this project on stackblitz
Fixed by adding a condition to return the default values also when clerk.value is null.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-03-11T10:26:01Z

🦋 Changeset detected

Latest commit: 7517f9c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/vue	Patch
@clerk/nuxt	Patch

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

vercel · 2025-03-11T10:26:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 11, 2025 8:22pm

panteliselef · 2025-03-11T10:45:20Z

+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@wobsoriano Clerk being null while clientCtx is defined seems like an invalid state. I'd expect the existing code to work as expected, which makes me that there is another underlying cause for this issue.

FYI the issue was client resource was initially set to an empty object. See my comment here.
This one now looks good!

wobsoriano · 2025-03-11T14:23:13Z

Hi @Dorilama! Thanks for the PR and reproduction.

As @panteliselef mentioned, having clientCtx defined while clerk is null is indeed an invalid state.

While our React useSessionList() hook has the same logic as the Vue one's, it utilizes an extended Clerk class, specifically the IsomorphicClerk, which allows methods to be called lazily even when clerk is null.

In the Vue implementation, we do not use the IsomorphicClerk, so we should avoid rendering clerk.value!.setActive in useSessionList.ts if clerk.value is null. This PR makes sense, but I'll still need to investigate on why there's a possibility of clientCtx having defined while clerk is null and get back to you shortly!

wobsoriano · 2025-03-11T14:39:32Z


 const result = computed<UseSessionListReturn>(() => {
- if (!clientCtx.value) {
+ if (!clientCtx.value || !clerk.value) {


Okay, the issue is that we have the clientCtx value initially set to an empty object that's why it passes the condition even if clerk is null.
Would you be able to update the initial value to undefined and assert the type for now? (client: undefined as unknown as ClientResource). Then we can merge the PR!
This should be a safe update as we check the value of clerk in all of our composables except useSessionList().
Thanks!

wobsoriano

Thanks so much and very nice catch! 🚀

Dorilama · 2025-03-11T18:09:34Z

thank you for all the work with the sdk :)

panteliselef · 2025-03-11T18:33:13Z

+'@clerk/vue': patch
+---
+
+updating the initial value of `clientCtx` to `undefined` as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)


Suggested change
updating the initial value of `clientCtx` to `undefined`as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)
Bug fix: Update the initial value of `clientCtx` to `undefined`to correctly infer that `clerk` is defined.

panteliselef · 2025-03-11T18:34:06Z

+---
+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@Dorilama Can you please remove this changeset, in favour of the new one ? We should only have one changeset file per package

yes, sorry about that 😅

Dorilama · 2025-03-11T10:25:57Z

Description

Fixes UsesessionList bug: when clientCtx is defined clerk can be null and the composable throws when trying to access clerk.value.setActive.
The error can be reproduced in this project on stackblitz
Fixed by adding a condition to return the default values also when clerk.value is null.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-03-11T10:26:01Z

🦋 Changeset detected

Latest commit: 7517f9c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/vue	Patch
@clerk/nuxt	Patch

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

vercel · 2025-03-11T10:26:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 11, 2025 8:22pm

panteliselef · 2025-03-11T10:45:20Z

+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@wobsoriano Clerk being null while clientCtx is defined seems like an invalid state. I'd expect the existing code to work as expected, which makes me that there is another underlying cause for this issue.

FYI the issue was client resource was initially set to an empty object. See my comment here.
This one now looks good!

wobsoriano · 2025-03-11T14:23:13Z

Hi @Dorilama! Thanks for the PR and reproduction.

As @panteliselef mentioned, having clientCtx defined while clerk is null is indeed an invalid state.

While our React useSessionList() hook has the same logic as the Vue one's, it utilizes an extended Clerk class, specifically the IsomorphicClerk, which allows methods to be called lazily even when clerk is null.

In the Vue implementation, we do not use the IsomorphicClerk, so we should avoid rendering clerk.value!.setActive in useSessionList.ts if clerk.value is null. This PR makes sense, but I'll still need to investigate on why there's a possibility of clientCtx having defined while clerk is null and get back to you shortly!

wobsoriano · 2025-03-11T14:39:32Z


 const result = computed<UseSessionListReturn>(() => {
- if (!clientCtx.value) {
+ if (!clientCtx.value || !clerk.value) {


Okay, the issue is that we have the clientCtx value initially set to an empty object that's why it passes the condition even if clerk is null.
Would you be able to update the initial value to undefined and assert the type for now? (client: undefined as unknown as ClientResource). Then we can merge the PR!
This should be a safe update as we check the value of clerk in all of our composables except useSessionList().
Thanks!

wobsoriano

Thanks so much and very nice catch! 🚀

Dorilama · 2025-03-11T18:09:34Z

thank you for all the work with the sdk :)

panteliselef · 2025-03-11T18:33:13Z

+'@clerk/vue': patch
+---
+
+updating the initial value of `clientCtx` to `undefined` as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)


Suggested change
updating the initial value of `clientCtx` to `undefined`as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)
Bug fix: Update the initial value of `clientCtx` to `undefined`to correctly infer that `clerk` is defined.

panteliselef · 2025-03-11T18:34:06Z

+---
+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@Dorilama Can you please remove this changeset, in favour of the new one ? We should only have one changeset file per package

yes, sorry about that 😅

Dorilama · 2025-03-11T10:25:57Z

Description

Fixes UsesessionList bug: when clientCtx is defined clerk can be null and the composable throws when trying to access clerk.value.setActive.
The error can be reproduced in this project on stackblitz
Fixed by adding a condition to return the default values also when clerk.value is null.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-03-11T10:26:01Z

🦋 Changeset detected

Latest commit: 7517f9c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/vue	Patch
@clerk/nuxt	Patch

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

vercel · 2025-03-11T10:26:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 11, 2025 8:22pm

panteliselef · 2025-03-11T10:45:20Z

+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@wobsoriano Clerk being null while clientCtx is defined seems like an invalid state. I'd expect the existing code to work as expected, which makes me that there is another underlying cause for this issue.

FYI the issue was client resource was initially set to an empty object. See my comment here.
This one now looks good!

wobsoriano · 2025-03-11T14:23:13Z

Hi @Dorilama! Thanks for the PR and reproduction.

As @panteliselef mentioned, having clientCtx defined while clerk is null is indeed an invalid state.

While our React useSessionList() hook has the same logic as the Vue one's, it utilizes an extended Clerk class, specifically the IsomorphicClerk, which allows methods to be called lazily even when clerk is null.

In the Vue implementation, we do not use the IsomorphicClerk, so we should avoid rendering clerk.value!.setActive in useSessionList.ts if clerk.value is null. This PR makes sense, but I'll still need to investigate on why there's a possibility of clientCtx having defined while clerk is null and get back to you shortly!

wobsoriano · 2025-03-11T14:39:32Z


 const result = computed<UseSessionListReturn>(() => {
- if (!clientCtx.value) {
+ if (!clientCtx.value || !clerk.value) {


Okay, the issue is that we have the clientCtx value initially set to an empty object that's why it passes the condition even if clerk is null.
Would you be able to update the initial value to undefined and assert the type for now? (client: undefined as unknown as ClientResource). Then we can merge the PR!
This should be a safe update as we check the value of clerk in all of our composables except useSessionList().
Thanks!

wobsoriano

Thanks so much and very nice catch! 🚀

Dorilama · 2025-03-11T18:09:34Z

thank you for all the work with the sdk :)

panteliselef · 2025-03-11T18:33:13Z

+'@clerk/vue': patch
+---
+
+updating the initial value of `clientCtx` to `undefined` as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)


Suggested change
updating the initial value of `clientCtx` to `undefined`as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)
Bug fix: Update the initial value of `clientCtx` to `undefined`to correctly infer that `clerk` is defined.

panteliselef · 2025-03-11T18:34:06Z

+---
+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@Dorilama Can you please remove this changeset, in favour of the new one ? We should only have one changeset file per package

yes, sorry about that 😅

Dorilama · 2025-03-11T10:25:57Z

Description

Fixes UsesessionList bug: when clientCtx is defined clerk can be null and the composable throws when trying to access clerk.value.setActive.
The error can be reproduced in this project on stackblitz
Fixed by adding a condition to return the default values also when clerk.value is null.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-03-11T10:26:01Z

🦋 Changeset detected

Latest commit: 7517f9c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/vue	Patch
@clerk/nuxt	Patch

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

vercel · 2025-03-11T10:26:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 11, 2025 8:22pm

panteliselef · 2025-03-11T10:45:20Z

+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@wobsoriano Clerk being null while clientCtx is defined seems like an invalid state. I'd expect the existing code to work as expected, which makes me that there is another underlying cause for this issue.

FYI the issue was client resource was initially set to an empty object. See my comment here.
This one now looks good!

wobsoriano · 2025-03-11T14:23:13Z

Hi @Dorilama! Thanks for the PR and reproduction.

As @panteliselef mentioned, having clientCtx defined while clerk is null is indeed an invalid state.

While our React useSessionList() hook has the same logic as the Vue one's, it utilizes an extended Clerk class, specifically the IsomorphicClerk, which allows methods to be called lazily even when clerk is null.

In the Vue implementation, we do not use the IsomorphicClerk, so we should avoid rendering clerk.value!.setActive in useSessionList.ts if clerk.value is null. This PR makes sense, but I'll still need to investigate on why there's a possibility of clientCtx having defined while clerk is null and get back to you shortly!

wobsoriano · 2025-03-11T14:39:32Z


 const result = computed<UseSessionListReturn>(() => {
- if (!clientCtx.value) {
+ if (!clientCtx.value || !clerk.value) {


Okay, the issue is that we have the clientCtx value initially set to an empty object that's why it passes the condition even if clerk is null.
Would you be able to update the initial value to undefined and assert the type for now? (client: undefined as unknown as ClientResource). Then we can merge the PR!
This should be a safe update as we check the value of clerk in all of our composables except useSessionList().
Thanks!

wobsoriano

Thanks so much and very nice catch! 🚀

Dorilama · 2025-03-11T18:09:34Z

thank you for all the work with the sdk :)

panteliselef · 2025-03-11T18:33:13Z

+'@clerk/vue': patch
+---
+
+updating the initial value of `clientCtx` to `undefined` as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)


Suggested change
updating the initial value of `clientCtx` to `undefined`as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)
Bug fix: Update the initial value of `clientCtx` to `undefined`to correctly infer that `clerk` is defined.

panteliselef · 2025-03-11T18:34:06Z

+---
+'@clerk/vue': patch
+---
+
+fix UsesessionList bug. When `clientCtx` is defined `clerk` can be `null` and throw when trying to access `clerk.value.setActive`. Added a condition to return the default values also when `clerk.value` is `null`.


@Dorilama Can you please remove this changeset, in favour of the new one ? We should only have one changeset file per package

yes, sorry about that 😅

fix(vue): add check for clerk.value in UseSessionList composable
6cecfb8

clerk-cookie added the vue label Mar 11, 2025

vercelBotdeployed to Preview March 11, 2025 10:27 View deployment

panteliselef reviewed Mar 11, 2025
View reviewed changes

wobsoriano reviewed Mar 11, 2025
View reviewed changes

wobsoriano changed the title ~~fix(vue): add check for clerk.value in UseSessionList composable~~fix(vue): add check for clerk.value in useSessionList() composableMar 11, 2025

fix(vue): set initial value of clientCtx to undefined
b5d8871

vercelBotdeployed to Preview March 11, 2025 17:59 View deployment

wobsoriano approved these changes Mar 11, 2025
View reviewed changes

panteliselef suggested changes Mar 11, 2025
View reviewed changes

panteliselef changed the title ~~fix(vue): add check for clerk.value in useSessionList() composable~~fix(vue): Set initial value of clientCtx to undefinedMar 11, 2025

fix: update changelog
7517f9c

vercelBotdeployed to Preview March 11, 2025 20:22 View deployment

panteliselef approved these changes Mar 12, 2025
View reviewed changes

nikosdouvlis merged commit ba2b00c into clerk:mainMar 12, 2025

clerk-cookie mentioned this pull request Mar 12, 2025
ci(repo): Version packages #5332
Merged

fix(vue): add check for clerk.value in UseSessionList composable
6cecfb8

clerk-cookie added the vue label Mar 11, 2025

vercelBotdeployed to Preview March 11, 2025 10:27 View deployment

panteliselef reviewed Mar 11, 2025
View reviewed changes

wobsoriano reviewed Mar 11, 2025
View reviewed changes

wobsoriano changed the title ~~fix(vue): add check for clerk.value in UseSessionList composable~~fix(vue): add check for clerk.value in useSessionList() composableMar 11, 2025

fix(vue): set initial value of clientCtx to undefined
b5d8871

vercelBotdeployed to Preview March 11, 2025 17:59 View deployment

wobsoriano approved these changes Mar 11, 2025
View reviewed changes

panteliselef suggested changes Mar 11, 2025
View reviewed changes

panteliselef changed the title ~~fix(vue): add check for clerk.value in useSessionList() composable~~fix(vue): Set initial value of clientCtx to undefinedMar 11, 2025

fix: update changelog
7517f9c

vercelBotdeployed to Preview March 11, 2025 20:22 View deployment

panteliselef approved these changes Mar 12, 2025
View reviewed changes

nikosdouvlis merged commit ba2b00c into clerk:mainMar 12, 2025

clerk-cookie mentioned this pull request Mar 12, 2025
ci(repo): Version packages #5332
Merged

fix(vue): add check for clerk.value in UseSessionList composable
6cecfb8

clerk-cookie added the vue label Mar 11, 2025

vercelBotdeployed to Preview March 11, 2025 10:27 View deployment

panteliselef reviewed Mar 11, 2025
View reviewed changes

wobsoriano reviewed Mar 11, 2025
View reviewed changes

wobsoriano changed the title ~~fix(vue): add check for clerk.value in UseSessionList composable~~fix(vue): add check for clerk.value in useSessionList() composableMar 11, 2025

fix(vue): set initial value of clientCtx to undefined
b5d8871

vercelBotdeployed to Preview March 11, 2025 17:59 View deployment

wobsoriano approved these changes Mar 11, 2025
View reviewed changes

panteliselef suggested changes Mar 11, 2025
View reviewed changes

panteliselef changed the title ~~fix(vue): add check for clerk.value in useSessionList() composable~~fix(vue): Set initial value of clientCtx to undefinedMar 11, 2025

fix: update changelog
7517f9c

vercelBotdeployed to Preview March 11, 2025 20:22 View deployment

panteliselef approved these changes Mar 12, 2025
View reviewed changes

nikosdouvlis merged commit ba2b00c into clerk:mainMar 12, 2025

clerk-cookie mentioned this pull request Mar 12, 2025
ci(repo): Version packages #5332
Merged

fix(vue): add check for clerk.value in UseSessionList composable
6cecfb8

clerk-cookie added the vue label Mar 11, 2025

vercelBotdeployed to Preview March 11, 2025 10:27 View deployment

panteliselef reviewed Mar 11, 2025
View reviewed changes

wobsoriano reviewed Mar 11, 2025
View reviewed changes

wobsoriano changed the title ~~fix(vue): add check for clerk.value in UseSessionList composable~~fix(vue): add check for clerk.value in useSessionList() composableMar 11, 2025

fix(vue): set initial value of clientCtx to undefined
b5d8871

vercelBotdeployed to Preview March 11, 2025 17:59 View deployment

wobsoriano approved these changes Mar 11, 2025
View reviewed changes

panteliselef suggested changes Mar 11, 2025
View reviewed changes

panteliselef changed the title ~~fix(vue): add check for clerk.value in useSessionList() composable~~fix(vue): Set initial value of clientCtx to undefinedMar 11, 2025

fix: update changelog
7517f9c

vercelBotdeployed to Preview March 11, 2025 20:22 View deployment

panteliselef approved these changes Mar 12, 2025
View reviewed changes

nikosdouvlis merged commit ba2b00c into clerk:mainMar 12, 2025

clerk-cookie mentioned this pull request Mar 12, 2025
ci(repo): Version packages #5332
Merged

fix(vue): add check for clerk.value in UseSessionList composable
6cecfb8

clerk-cookie added the vue label Mar 11, 2025

vercelBotdeployed to Preview March 11, 2025 10:27 View deployment

panteliselef reviewed Mar 11, 2025
View reviewed changes

wobsoriano reviewed Mar 11, 2025
View reviewed changes

wobsoriano changed the title ~~fix(vue): add check for clerk.value in UseSessionList composable~~fix(vue): add check for clerk.value in useSessionList() composableMar 11, 2025

fix(vue): set initial value of clientCtx to undefined
b5d8871

vercelBotdeployed to Preview March 11, 2025 17:59 View deployment

wobsoriano approved these changes Mar 11, 2025
View reviewed changes

panteliselef suggested changes Mar 11, 2025
View reviewed changes

panteliselef changed the title ~~fix(vue): add check for clerk.value in useSessionList() composable~~fix(vue): Set initial value of clientCtx to undefinedMar 11, 2025

fix: update changelog
7517f9c

vercelBotdeployed to Preview March 11, 2025 20:22 View deployment

panteliselef approved these changes Mar 12, 2025
View reviewed changes

nikosdouvlis merged commit ba2b00c into clerk:mainMar 12, 2025

clerk-cookie mentioned this pull request Mar 12, 2025
ci(repo): Version packages #5332
Merged

fix(vue): add check for clerk.value in UseSessionList composable
6cecfb8

clerk-cookie added the vue label Mar 11, 2025

vercelBotdeployed to Preview March 11, 2025 10:27 View deployment

panteliselef reviewed Mar 11, 2025
View reviewed changes

wobsoriano reviewed Mar 11, 2025
View reviewed changes

wobsoriano changed the title ~~fix(vue): add check for clerk.value in UseSessionList composable~~fix(vue): add check for clerk.value in useSessionList() composableMar 11, 2025

fix(vue): set initial value of clientCtx to undefined
b5d8871

vercelBotdeployed to Preview March 11, 2025 17:59 View deployment

wobsoriano approved these changes Mar 11, 2025
View reviewed changes

panteliselef suggested changes Mar 11, 2025
View reviewed changes

panteliselef changed the title ~~fix(vue): add check for clerk.value in useSessionList() composable~~fix(vue): Set initial value of clientCtx to undefinedMar 11, 2025

fix: update changelog
7517f9c

vercelBotdeployed to Preview March 11, 2025 20:22 View deployment

panteliselef approved these changes Mar 12, 2025
View reviewed changes

nikosdouvlis merged commit ba2b00c into clerk:mainMar 12, 2025

clerk-cookie mentioned this pull request Mar 12, 2025
ci(repo): Version packages #5332
Merged

fix(vue): add check for clerk.value in UseSessionList composable
6cecfb8

clerk-cookie added the vue label Mar 11, 2025

vercelBotdeployed to Preview March 11, 2025 10:27 View deployment

panteliselef reviewed Mar 11, 2025
View reviewed changes

wobsoriano reviewed Mar 11, 2025
View reviewed changes

wobsoriano changed the title ~~fix(vue): add check for clerk.value in UseSessionList composable~~fix(vue): add check for clerk.value in useSessionList() composableMar 11, 2025

fix(vue): set initial value of clientCtx to undefined
b5d8871

vercelBotdeployed to Preview March 11, 2025 17:59 View deployment

wobsoriano approved these changes Mar 11, 2025
View reviewed changes

panteliselef suggested changes Mar 11, 2025
View reviewed changes

panteliselef changed the title ~~fix(vue): add check for clerk.value in useSessionList() composable~~fix(vue): Set initial value of clientCtx to undefinedMar 11, 2025

fix: update changelog
7517f9c

vercelBotdeployed to Preview March 11, 2025 20:22 View deployment

panteliselef approved these changes Mar 12, 2025
View reviewed changes

nikosdouvlis merged commit ba2b00c into clerk:mainMar 12, 2025

clerk-cookie mentioned this pull request Mar 12, 2025
ci(repo): Version packages #5332
Merged

fix(vue): add check for clerk.value in UseSessionList composable
6cecfb8

clerk-cookie added the vue label Mar 11, 2025

vercelBotdeployed to Preview March 11, 2025 10:27 View deployment

panteliselef reviewed Mar 11, 2025
View reviewed changes

wobsoriano reviewed Mar 11, 2025
View reviewed changes

wobsoriano changed the title ~~fix(vue): add check for clerk.value in UseSessionList composable~~fix(vue): add check for clerk.value in useSessionList() composableMar 11, 2025

fix(vue): set initial value of clientCtx to undefined
b5d8871

vercelBotdeployed to Preview March 11, 2025 17:59 View deployment

wobsoriano approved these changes Mar 11, 2025
View reviewed changes

panteliselef suggested changes Mar 11, 2025
View reviewed changes

panteliselef changed the title ~~fix(vue): add check for clerk.value in useSessionList() composable~~fix(vue): Set initial value of clientCtx to undefinedMar 11, 2025

fix: update changelog
7517f9c

vercelBotdeployed to Preview March 11, 2025 20:22 View deployment

panteliselef approved these changes Mar 12, 2025
View reviewed changes

nikosdouvlis merged commit ba2b00c into clerk:mainMar 12, 2025

clerk-cookie mentioned this pull request Mar 12, 2025
ci(repo): Version packages #5332
Merged

	updating the initial value of `clientCtx` to `undefined`as requested [here](https://github.com/clerk/javascript/pull/5324#discussion_r1989445357)
	Bug fix: Update the initial value of `clientCtx` to `undefined`to correctly infer that `clerk` is defined.

Uh oh!

Conversation

Dorilama commented Mar 11, 2025• edited by wobsoriano Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-botBot commented Mar 11, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercelBot commented Mar 11, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wobsoriano commented Mar 11, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wobsorianoMar 11, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wobsoriano left a comment

Choose a reason for hiding this comment

Uh oh!

Dorilama commented Mar 11, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

Dorilama commented Mar 11, 2025• edited by wobsoriano Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-botBot commented Mar 11, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercelBot commented Mar 11, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wobsoriano commented Mar 11, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wobsorianoMar 11, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wobsoriano left a comment

Choose a reason for hiding this comment

Uh oh!

Dorilama commented Mar 11, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Dorilama commented Mar 11, 2025•
edited by wobsoriano
Loading

changeset-botBot commented Mar 11, 2025•
edited
Loading

vercelBot commented Mar 11, 2025•
edited
Loading

wobsoriano commented Mar 11, 2025•
edited
Loading

wobsorianoMar 11, 2025•
edited
Loading

Dorilama commented Mar 11, 2025•
edited by wobsoriano
Loading

changeset-botBot commented Mar 11, 2025•
edited
Loading

vercelBot commented Mar 11, 2025•
edited
Loading

wobsoriano commented Mar 11, 2025•
edited
Loading

wobsorianoMar 11, 2025•
edited
Loading

Dorilama commented Mar 11, 2025•
edited by wobsoriano
Loading

changeset-botBot commented Mar 11, 2025•
edited
Loading

vercelBot commented Mar 11, 2025•
edited
Loading

wobsoriano commented Mar 11, 2025•
edited
Loading

wobsorianoMar 11, 2025•
edited
Loading