Usage with `@tanstack/solid-router`

[mrlubos]

Feature Description

Hey! The Solid version of TanStack Router has just been released and sadly this package isn't compatible with it by default. Rendering the <ClerkProvider> component alone will produce the following error.

Error: <A> and 'use' router primitives can be only used inside a Route.

Use Case

No response

Additional context

No response

[targetlucked69]

It's because the <ClerkProvider> component is using a function imported from @solidjs/router here. So I'd say until that one gets removed, this cannot be used outside of solid and solid-start

[ian-pascoe]

You can use the ClerkProvider from clerk-solidjs instead of clerks-solidjs/start/client.

I will work on getting a TanStack start client put together for this use case.

[mrlubos]

Awesome @ian-pascoe! Do you think it would be possible to remove the router dependency altogether?

[ian-pascoe]

I think it is a generally safe assumption for the @solidjs/start client to be using @solidjs/router. Just like it would be a safe assumption for the tanstack start client to use the tanstack router

[mrlubos]

TanStack Start isn't available for SolidJS, it's just the router for now. But nothing against, as long as there's some workaround!

[targetlucked69]

Howdy, what's the status of this?

[targetlucked69]

FYI, tanstack solid start is here - https://tanstack.com/start/latest/docs/framework/solid/overview

My suggestion is to have:

1. clerk-solidjs for vanilla Solid apps (without router dependency)
2. clerk-solidjs-start for solid-start (built on top of clerk-solidjs)
3. clerk-solidjs-tanstack for tanstack-router and tanstack-start (also built on top of clerk-solidjs)

[ian-pascoe]

Howdy, what's the status of this?

@targetlucked69 Did you see the current workaround above?

[kpgarrod]

I had implemented the above workaround with a version of tanstack-solid-start that depended on vinxi. Clerk was working fine. When I came back to the project a couple of months later, I decided to upgrade to the latest tanstack-solid-start which meant removing vinxi and using vite directly. Now I can't get Clerk to work. A simplified version of my code looks like this:

import { ClerkProvider, ClerkLoaded, ClerkLoading } from "clerk-solidjs";
const Header = function () {
  return (
<ClerkProvider
          publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
        >
      <ClerkLoading>
        <p>Loading...</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Loaded</p>
      </ClerkLoaded>
</ClerkProvider>
  );
};
export default Header;

All I ever see is a message in the console warning me that the Clerk Key is a dev key, and

Loading...

in the browser.

[birkskyum]

WIP tanstack start package built on top of clerk-solidjs:

• https://www.npmjs.com/package/clerk-solidjs-tanstack-start

Trying to follow the naming suggested here

[birkskyum]

Ugh, these imports

// start/client/use-awaitable-navigate.ts

import type { NavigateOptions } from '@solidjs/router';
import { useLocation, useNavigate } from '@solidjs/router';

// start/server/middleware.ts 
import type { RequestMiddleware } from '@solidjs/start/middleware';