useClerk() does not return a proper Clerk instance type

kalebpace commented 10 months ago

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerkinc/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction / Replay Link

https://codesandbox.io/p/sandbox/awesome-easley-m9m88h?file=%2Fapp%2Fpage.tsx

Publishable key

pk_test_Z2VudGxlLWxhYi04NC5jbGVyay5hY2NvdW50cy5kZXYk

Description

Steps to reproduce:

Import useClerk from @clerk/nextjs or @clerk/clerk-react
Use the hook to get access to a clerk object
Attempt to use clerk as normal (e.g. clerk.instanceType)

Expected behavior:

clerk.instanceType should return either "development" or "production"

Actual behavior:

clerk.instanceType always returns "undefined" with no runtime or type errors. The developer must instead access the normal Clerk object under clerk.clerkjs.instanceType and use //@ts-ignore to satisfy type checking, along with disabling any eslint rule violations.

Environment

In the above codesandbox, the NextJS version is 14 which exhibits the same behavior as the local environment which is on NextJS 13.4.3. Output below is from local machine with relevant deps listed.

System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 359.39 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - /nix/store/y4n2ky0jqqhhknr70vkn6fz11bajzl6k-nodejs-18.17.1/bin/node
    npm: 9.6.7 - /nix/store/y4n2ky0jqqhhknr70vkn6fz11bajzl6k-nodejs-18.17.1/bin/npm
    pnpm: 8.5.1 - /run/current-system/sw/bin/pnpm
  Browsers:
    Chrome: 118.0.5993.117
    Safari: 17.0
  npmPackages:
    @clerk/clerk-js: ^4.64.1 => 4.64.1 
    @clerk/clerk-react: ^4.27.1 => 4.27.1 
    @clerk/nextjs: ^4.26.1 => 4.26.1 
    @clerk/types: ^3.57.0 => 3.57.0 
    next: 13.4.3 => 13.4.3 
    react: 18.2.0 => 18.2.0 
    swr: ^2.2.2 => 2.2.2 
    typescript: 5.0.4 => 5.0.4

LekoArts commented 9 months ago

Hi, thanks for the issue!

I was able to reproduce it and I also know what will fix it. The PR https://github.com/clerk/javascript/pull/2226 will align clerk.clerkjs and what you can access from useClerk.

Once the PR is merged we'll backport it to the current v4 branch (since we're working on v5 at the moment) and then release it as a hotfix for the current latest version.

kalebpace commented 9 months ago

Amazing, thanks so much for the attention to this!

LekoArts commented 9 months ago

Hello!

This was released in https://github.com/clerk/javascript/pull/2235 - once you update to the versions mentioned there it should work.

I'll close this but please let me know if it still doesn't work!

clerk / javascript