libsql-client-ts

libsql-client-ts copied to clipboard

As shown in https://github.com/prisma/prisma/issues/23774, we get the Invalid URL error when deploying on Vercel. This happens on 0.6.0 but not on 0.5.6, which can give some clues about what the issue is about.

This is also causing an issue with Prisma.

Relevant context:

• Prisma issue.
• Discord.

I have some findings to share.

I did some tests by removing prisma from the code and it turns out that prisma is not related with this issue.

Here's a reproducer of this issue without prisma:

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { createClient } from "@libsql/client";

export const libsql = createClient({
  url: `${process.env.TURSO_DATABASE_URL}`,
  authToken: `${process.env.TURSO_AUTH_TOKEN}`,
});

export const loader = async () => {
  console.log("url:", process.env.TURSO_DATABASE_URL);
  const rs = await libsql.execute("select * from post");
  const posts = rs.rows as unknown as Array<{
    id: string;
    title: string;
    content: string;
  }>;

  return json({ posts });
};

export default function Index() {
  const { posts } = useLoaderData<typeof loader>();

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Welcome to Remix</h1>
      {posts.length === 0 && <li>No posts found.</li>}
      {posts.map((post) => {
        return (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        );
      })}
    </div>
  );
}

In this case Vercel shows that we're using the correct url and that the issue comes from the following:

 at new URL (node:internal/url:797:36)
    at new Request (/var/task/node_modules/@remix-run/web-fetch/dist/lib.node.cjs:1437:16)

This makes me think that there's something related with the way in which Remix patches fetch that makes the code fail when parsing a url that starts with "libsql://" (because we're using @remix-run/web-fetch indirectly).

I also tested replacing "libsql://" by "https://" but looks like it's being replaced internally anyways.

I'll keep investigating this but at least we have more information to find the issue.

I forgot to mention that this doesn't happen with Next.js on Vercel. I created a reproducer in case you want to test it in this URL: https://github.com/giovannibenussi/nextjs-turso-vercel You just need to setup the .env file and deploy it to Vercel.

I also found this comment that shows a similar error to this happening on Clerk when running Remix on Vercel too: https://github.com/orgs/clerk/discussions/2900#discussioncomment-8987020

Specifically, this part is quite interesting:

Here's what happens:

1. @clerk/backend is imported, and this class is defined, extending the Request global from Node.js/undici
2. Vercel (or any other naïve server file) calls installGlobals() and replaces the global Request with the one from Remix
3. At runtime, a Remix Request gets passed into a ClerkRequest
4. Via super(), ClerkRequest passes the Remix Request to the Node.js Request
5. Node.js doesn't recognize the request instance, so it blindly tries to stringify it and parse it as URL
6. 💥

I just ran into an identical issue while migrating from planetscale to turso but using Drizzle ORM in my case.

• works correctly with the remix dev server.
• works correctly deployed to Vercel with the edge runtime.
• fails when deployed to Vercel using Node.

Sorry to hear that. Question, are you using remix too?

Yes- remix 2.9.2. Stack trace basically identical to yours. Not aiming to clutter the issue but just seconding your diagnosis that its specifically an interaction between Remix and Vercel's Node environment.

Thanks. No problem at all, as you said, this helps to diagnose the issue!