Remix and preloadQuery or alternatives

import type { MetaFunction } from "@remix-run/node";
import { json, useLoaderData } from "@remix-run/react";
import { api } from "convex/_generated/api";
import { usePreloadedQuery } from "convex/react";

// Only available in NextJS package but trying to use it in Remix
import { preloadQuery } from "convex/nextjs";

// Remix data loader
export async function loader() {
  // Runtime Typerror: Cannot destructure property 'ENV' of '__vite_ssr_import_1__.useLoaderData(...)' as it is undefined.
  // Error: Environment variable NEXT_PUBLIC_CONVEX_URL is not set. (root.ts)
  const tasks = await preloadQuery(api.tasks.get);
  return json({ tasks });
}

export default function Index() {
  const preloaded = useLoaderData<typeof loader>();
  console.log(preloaded);
  // Static TypeError: Argument of type 'JsonifyObject<Preloaded<FunctionReference<"query", "public", {}, any[], string | undefined>>>' is not assignable to parameter of type 'Preloaded<FunctionReference<"query">>'.
  const tasks = usePreloadedQuery(preloaded.tasks);
  return <div>{JSON.stringify(tasks)}</div>;
}

import type { MetaFunction } from "@remix-run/node";
import { json, useLoaderData } from "@remix-run/react";
import { api } from "convex/_generated/api";
import { usePreloadedQuery } from "convex/react";

// Only available in NextJS package but trying to use it in Remix
import { preloadQuery } from "convex/nextjs";

// Remix data loader
export async function loader() {
  // Runtime Typerror: Cannot destructure property 'ENV' of '__vite_ssr_import_1__.useLoaderData(...)' as it is undefined.
  // Error: Environment variable NEXT_PUBLIC_CONVEX_URL is not set. (root.ts)
  const tasks = await preloadQuery(api.tasks.get);
  return json({ tasks });
}

export default function Index() {
  const preloaded = useLoaderData<typeof loader>();
  console.log(preloaded);
  // Static TypeError: Argument of type 'JsonifyObject<Preloaded<FunctionReference<"query", "public", {}, any[], string | undefined>>>' is not assignable to parameter of type 'Preloaded<FunctionReference<"query">>'.
  const tasks = usePreloadedQuery(preloaded.tasks);
  return <div>{JSON.stringify(tasks)}</div>;
}