Headless error - loaded without UI components

[targetlucked69]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerkinc/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• 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://stackblitz.com/edit/vitejs-vite-1h7w8x

Publishable key

pk_test_Z29yZ2VvdXMtZmluY2gtMjQuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

I'm trying to use Clerk with a vanilla Vite project and decided to go with the headless version since the normal one's build size is too big. Everything works until I use a method like openSignIn. I get the ClerkJS was loaded without UI components. error:

Steps to reproduce:

1. Create a fresh vite project and choose vanilla.
2. Initialize clerk and add a simple clerk.openSignIn() call.
3. Check the console for the error.

Expected behavior:

It should open the signin popup, like what it does when using @clerk/clerk-js instead of @clerk/clerk-js/headless.

Actual behavior:

Popup not opening and is throwing an error.

How can I make sure that Clerk has been loaded with the UI components when using the headless version?

Environment

System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 133.86 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/Library/Caches/fnm_multishells/76371_1697694026593/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.7 - ~/Library/Caches/fnm_multishells/76371_1697694026593/bin/npm
    pnpm: 8.9.2 - /opt/homebrew/bin/pnpm
    Watchman: 2023.10.09.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 118.0.5993.70
    Safari: 17.0
  npmPackages:
    @clerk/clerk-js: ^4.62.1 => 4.62.1
    typescript: ^5.0.2 => 5.2.2
    vite: ^4.4.5 => 4.5.0

[jescalan]

In this case, you'd need to not use the headless version, as that version is shipped without UI components, hence the naming "headless". We do certainly need to add documentation on this though, we will get it on our list!

[LekoArts]

Another thing to add (that is also missing from the docs, we'll work on it!) is that we'll only import the used components (not the full bundle). So tools that statically analyze packages can't know that.

[targetlucked69]

Thanks @jescalan and @LekoArts. I have another question if you don't mind.

1. Is there a plan to ship the @clerk/clerk-js without the react dependency? Is that even possible since the components are made with React?
2. If no. 1 is not an option, and I want to mount components in my vanilla javascript app, would using the CDN be a good alternative? What about the size of the CDN? Will it still have react bundled in it?

Thank you!

[jescalan]

1. As you noted, it's not possible, and would require us to kind of have an entirely different architecture for the way we set up the package. It's not out of the question in the future, but isn't currently high on the roadmap.
2. It won't make any difference, the CDN houses the same package and does still have react bundled. In fact, our SDKs hot load clerk-js from the CDN as part of their own loading strategy.

[clerk-cookie]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.