UserResource types are in disagreement in `@clerk/clerk-expo` and `@clerk/types` in version 2.2.5

the-simian commented 1 week ago

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerk/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

n/a

Publishable key

pk_test_Y2hvaWNlLXBlYWNvY2stMy5jbGVyay5hY2NvdW50cy5kZXYk

Description

I am this issue with clerk-expo

I was able to get past this on 2.2.7 but after downgrading because of https://github.com/clerk/javascript/issues/4084 the window problem to 2.2.5 this problem is back.

//this type
import type { UserResource } from '@clerk/types';
const { useUser } from '@clerk/clerk-expo';

//is not the same as the type returned from this.
const { user } = useUser(); // typeof UserResourceReturn

//when I do something like this:
function myFunction(user: UserResource) {
  //do stuff with the user.
}

if (!user) return;  //user must exist for the next line.
myFunction(user);

I will get the following:

Argument of type 'import("/my-project/node_modules/@clerk/clerk-expo/node_modules/@clerk/types/dist/index").UserResource' is not assignable to parameter of type 'import("/my-project/node_modules/@clerk/types/dist/index").UserResource'.
  Types of property 'primaryWeb3Wallet' are incompatible.
    Type 'import("/my-project/node_modules/@clerk/clerk-expo/node_modules/@clerk/types/dist/index").Web3WalletResource | null' is not assignable to type 'import("/my-project/node_modules/@clerk/types/dist/index").Web3WalletResource | null'.
      Type 'import("/my-project/node_modules/@clerk/clerk-expo/node_modules/@clerk/types/dist/index").Web3WalletResource' is not assignable to type 'import("/my-project/node_modules/@clerk/types/dist/index").Web3WalletResource'.
        Types of property 'prepareVerification' are incompatible.
          Type '(params: import("/my-project/node_modules/@clerk/clerk-expo/node_modules/@clerk/types/dist/index").PrepareWeb3WalletVerificationParams) => Promise<...>' is not assignable to type '(params: import("/my-project/node_modules/@clerk/types/dist/index").PrepareWeb3WalletVerificationParams) => Promise<...>'.
            Types of parameters 'params' and 'params' are incompatible.
              Type 'import("/my-project/node_modules/@clerk/types/dist/index").PrepareWeb3WalletVerificationParams' is not assignable to type 'import("/my-project/node_modules/@clerk/clerk-expo/node_modules/@clerk/types/dist/index").PrepareWeb3WalletVerificationParams'.
                Types of property 'strategy' are incompatible.
                  Type '"web3_coinbase_signature" | "web3_metamask_signature" | "web3_coinbase_wallet_signature"' is not assignable to type '"web3_coinbase_signature" | "web3_metamask_signature"'.
                    Type '"web3_coinbase_wallet_signature"' is not assignable to type '"web3_coinbase_signature" | "web3_metamask_signature"'. Did you mean '"web3_coinbase_signature"'?

Additional Info: This was working before version 2.x.x with no tsc errors.

There is a similar issue here: https://github.com/clerk/javascript/issues/2176 , but the issue seemed slightly different so I am opening this issue.

Environment

This isn't relevant to this issue, but here's the output. Its a hybrid mobile/native expo project.

  System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Memory: 56.93 GB / 62.68 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 22.4.0 - ~/.nvm/versions/node/v22.4.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v22.4.0/bin/npm
    pnpm: 8.15.1 - ~/.local/share/pnpm/pnpm
    bun: 1.1.18 - ~/.bun/bin/bun  //using this on this project.
  npmPackages:
    @babel/core: 7.25.2 => 7.25.2
    @babel/plugin-proposal-export-namespace-from: ^7.18.9 => 7.18.9
    @babel/plugin-transform-react-jsx: ^7.25.2 => 7.25.2
    @biomejs/biome: 1.8.3 => 1.8.3
    @clerk/backend: ^1.9.2 => 1.9.2
    @clerk/clerk-expo: 2.2.5 => 2.2.5
    @clerk/clerk-react: ^5.7.0 => 5.7.0
    @expo/config: 9.0.3 => 9.0.3
    @expo/metro-runtime: ~3.2.3 => 3.2.3
    @expo/ngrok: 4.1.3 => 4.1.3
    @expo/vector-icons: 14.0.2 => 14.0.2
    @react-native-async-storage/async-storage: 1.23.1 => 1.23.1
    @react-native-community/datetimepicker: 8.0.1 => 8.0.1
    @react-native-community/slider: 4.5.2 => 4.5.2
    @react-navigation/drawer: 6.7.2 => 6.7.2
    @react-navigation/material-top-tabs: ^6.6.14 => 6.6.14
    @react-navigation/native: 6.1.18 => 6.1.18
    @sentry/react-native: ~5.22.0 => 5.22.3
    @shopify/flash-list: 1.6.4 => 1.6.4
    @types/bun: ^1.1.8 => 1.1.8
    @types/jsonwebtoken: ^9.0.6 => 9.0.6
    @types/react: ~18.2.79 => 18.2.79
    expo: ~51.0.31 => 51.0.32
    expo-application: 5.9.1 => 5.9.1
    expo-av: ~14.0.7 => 14.0.7
    expo-build-properties: ~0.12.5 => 0.12.5
    expo-camera: ~15.0.15 => 15.0.15
    expo-clipboard: 6.0.3 => 6.0.3
    expo-constants: ~16.0.2 => 16.0.2
    expo-crypto: 13.0.2 => 13.0.2
    expo-dev-client: ~4.0.25 => 4.0.26
    expo-device: ~6.0.2 => 6.0.2
    expo-doctor: ^1.10.1 => 1.10.1
    expo-font: ~12.0.9 => 12.0.10
    expo-haptics: 13.0.1 => 13.0.1
    expo-image-picker: ~15.0.7 => 15.0.7
    expo-linear-gradient: 13.0.2 => 13.0.2
    expo-linking: 6.3.1 => 6.3.1
    expo-local-authentication: ^14.0.1 => 14.0.1
    expo-navigation-bar: ~3.0.7 => 3.0.7
    expo-notifications: ~0.28.16 => 0.28.16
    expo-router: ~3.5.23 => 3.5.23
    expo-secure-store: ~13.0.2 => 13.0.2
    expo-server-sdk: 3.10.0 => 3.10.0
    expo-splash-screen: ~0.27.5 => 0.27.5
    expo-status-bar: 1.12.1 => 1.12.1
    expo-system-ui: ~3.0.7 => 3.0.7
    expo-updates: ~0.25.24 => 0.25.24
    expo-web-browser: 13.0.3 => 13.0.3
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    react-hook-form: 7.52.2 => 7.52.2
    react-native: 0.74.5 => 0.74.5
    react-native-apollo-devtools-client: ^1.0.4 => 1.0.4
    react-native-calendars: 1.1306.0 => 1.1306.0
    react-native-email-link: ^1.16.1 => 1.16.1
    react-native-gesture-handler: ~2.16.1 => 2.16.2
    react-native-gifted-chat: ^2.4.0 => 2.6.2
    react-native-pager-view: 6.3.0 => 6.3.0
    react-native-reanimated: ~3.10.1 => 3.10.1
    react-native-safe-area-context: 4.10.5 => 4.10.5
    react-native-screens: 3.31.1 => 3.31.1
    react-native-svg: 15.2.0 => 15.2.0
    react-native-tab-view: ^3.5.2 => 3.5.2
    react-native-toast-message: 2.2.0 => 2.2.0
    react-native-video: ^6.4.3 => 6.5.0
    react-native-web: ~0.19.12 => 0.19.12
    react-test-renderer: 18.2.0 => 18.2.0

the-simian commented 1 week ago

Fairly certain this was broken yesterday: https://github.com/clerk/javascript/blame/a0cb062faa4d23bef7a577e5cc486f4c5efe6bfa/packages/types/src/web3.ts#L22

cc: @chanioxaris web3_coinbase_wallet_signature is missing on one of the two types (clerk-expo does not have it). I've done a fresh install today, and I've followed the advice to downgrade to 2.2.5 while they fix the other issue.

LekoArts commented 1 week ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Clerk!

andrewchester1 commented 1 week ago

I just started using Clerk about a month ago, but so far this library seems to be broken a lot, and tracking down issues is not fun. I went on the discord because I have been facing this issue for two days. A developer recommended using 2.2.5, but I was still having problems. Version 2.24 worked for me...

panteliselef commented 1 week ago

Regarding the mismatch in the types, this is caused due to a mismatch between the version of @clerk/types that a specific @clerk/expo version expects, versus the @clerk/types versions that is actually installed in your machine. This is a common issue especially if you installing @clerk/types directly.

To fix: Installing this combo, should fix your issues.

"@clerk/clerk-expo": "2.2.5"
"@clerk/types": "4.17.0"

panteliselef commented 1 week ago

@andrewchester1 what issues are you having with 2.2.5 ?

the-simian commented 6 days ago

@panteliselef I was not declaring @clerk/types in the package.json. These are being managed by your dep tree. I am just trying to use Clerk types, but the library itself doesn't expose these types. I'm using whatever clerk-expo declares.

@clerk/backend: ^1.9.2 => 1.9.2
@clerk/clerk-expo: 2.2.5 => 2.2.5
@clerk/clerk-react: ^5.7.0 => 5.7.0

I see the 2.2.4 uses "@clerk/types": "4.17.0", but it looks like clerk- react uses a later version.

The problem is there's no way to know that that's disagreement with the underlying deps because this isn't set up like a traditional monorepo where the versions are synchronised ( storybook, babel, etc ). I had to dig into all the package.json in the git history to figure out that you released clerk-react at 5.5.0 at the same time as clerk-expo 2.2.5. There's no peer dependencies or anything to suggest these are not compatible - but they are not compatible due to the underlying types dependency.

At the same time, considering the the dependencies themselves, if they expose the types I need, I don't see how to do this clearly. What I want to do is write a function where I enforce the type that one of your libraries outputted, is there a better way to do this?

I'm going to close this because I looked through your git history to find 'matching clients'. You should still fix this.

clerk / javascript