feat(webapp): migrate from the classic Remix compiler to Vite

Workspace packages resolve to TS source via the @triggerdotdev/source
condition; server.ts keeps the Express/cluster/ws wiring with vite
middleware in dev and the ESM server bundle in prod. Fixes surfaced by
the stricter ESM pipeline: destructured route exports, server-only
imports in routes/components, CJS interop (redlock, cuid, regression),
browser node-global shims, font asset handling, and a websockets TDZ.

Author: kathiekiwi

.changeset/vite-ignore-optional-imports.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Annotate the optional `@ai-sdk/otel` dynamic import with `@vite-ignore` so Vite-based bundlers don't warn about an unanalyzable import.

apps/webapp/app/components/primitives/Avatar.tsx

@@ -10,7 +10,6 @@ import {
 } from "@heroicons/react/20/solid";
 import type { Prisma } from "@trigger.dev/database";
 import { z } from "zod";
-import { logger } from "~/services/logger.server";
 import { cn } from "~/utils/cn";
 
 export const AvatarType = z.enum(["icon", "letters", "image"]);
@@ -45,7 +44,7 @@ export function parseAvatar(json: Prisma.JsonValue, defaultAvatar: Avatar): Avat
   const parsed = AvatarData.safeParse(json);
 
   if (!parsed.success) {
-    logger.error("Invalid org avatar", { json, error: parsed.error });
+    console.error("Invalid org avatar", { json, error: parsed.error });
     return defaultAvatar;
   }
 

apps/webapp/app/presenters/v3/UsagePresenter.server.ts

@@ -1,5 +1,8 @@
 import type { DataPoint } from "regression";
-import { linear } from "regression";
+// Default-import: regression is CJS and its named exports aren't statically
+// analyzable under ESM interop.
+import regression from "regression";
+const { linear } = regression;
 import type { PrismaClientOrTransaction } from "~/db.server";
 import { env } from "~/env.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";

apps/webapp/app/root.tsx

@@ -1,11 +1,14 @@
 import type { LinksFunction, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
-import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
 import { type UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { ExternalScripts } from "remix-utils/external-scripts";
 import type { ToastMessage } from "~/models/message.server";
 import { commitSession, getSession } from "~/models/message.server";
-import tailwindStylesheetUrl from "~/tailwind.css";
+// Fonts imported here so Vite rebases the urls and emits the woff2 assets
+import "non.geist";
+import "non.geist/mono";
+import tailwindStylesheetUrl from "~/tailwind.css?url";
 import { RouteErrorDisplay } from "./components/ErrorDisplay";
 import { AppContainer, MainCenteredContainer } from "./components/layout/AppLayout";
 import { ShortcutsProvider } from "./components/primitives/ShortcutsProvider";
@@ -135,7 +138,6 @@ export default function App() {
           <ScrollRestoration />
           <ExternalScripts />
           <Scripts />
-          <LiveReload />
         </body>
       </html>
     </>

apps/webapp/app/routes/api.v1.errors.$errorId.ignore.ts

@@ -9,7 +9,7 @@ const ParamsSchema = z.object({
   errorId: z.string(),
 });
 
-export const { action, loader } = createActionApiRoute(
+const route = createActionApiRoute(
   {
     params: ParamsSchema,
     body: IgnoreErrorRequestBody,
@@ -56,3 +56,6 @@ export const { action, loader } = createActionApiRoute(
     return json(updated);
   }
 );
+
+export const action = route.action;
+export const loader = route.loader;

apps/webapp/app/routes/api.v1.errors.$errorId.resolve.ts

@@ -9,7 +9,7 @@ const ParamsSchema = z.object({
   errorId: z.string(),
 });
 
-export const { action, loader } = createActionApiRoute(
+const route = createActionApiRoute(
   {
     params: ParamsSchema,
     body: ResolveErrorRequestBody,
@@ -48,3 +48,6 @@ export const { action, loader } = createActionApiRoute(
     return json(updated);
   }
 );
+
+export const action = route.action;
+export const loader = route.loader;

apps/webapp/app/routes/api.v1.errors.$errorId.unresolve.ts

@@ -8,7 +8,7 @@ const ParamsSchema = z.object({
   errorId: z.string(),
 });
 
-export const { action, loader } = createActionApiRoute(
+const route = createActionApiRoute(
   {
     params: ParamsSchema,
     method: "POST",
@@ -40,3 +40,6 @@ export const { action, loader } = createActionApiRoute(
     return json(updated);
   }
 );
+
+export const action = route.action;
+export const loader = route.loader;

apps/webapp/app/routes/api.v1.idempotencyKeys.$key.reset.ts

@@ -13,7 +13,7 @@ const BodySchema = z.object({
   taskIdentifier: z.string().min(1, "Task identifier is required"),
 });
 
-export const { action } = createActionApiRoute(
+const route = createActionApiRoute(
   {
     params: ParamsSchema,
     body: BodySchema,
@@ -50,3 +50,5 @@ export const { action } = createActionApiRoute(
     }
   }
 );
+
+export const action = route.action;

apps/webapp/app/routes/api.v1.orgs.$orgParam.projects.ts

@@ -7,7 +7,8 @@ import { prisma } from "~/db.server";
 import { createProject } from "~/models/project.server";
 import { logger } from "~/services/logger.server";
 import { authenticateApiRequestWithPersonalAccessToken } from "~/services/personalAccessToken.server";
-import { isCuid } from "cuid";
+import cuid from "cuid";
+const { isCuid } = cuid;
 
 const ParamsSchema = z.object({
   orgParam: z.string(),

apps/webapp/app/routes/api.v1.queues.$queueParam.concurrency.override.ts

@@ -10,7 +10,7 @@ const BodySchema = z.object({
   concurrencyLimit: z.number().int().min(0).max(100000),
 });
 
-export const { action } = createActionApiRoute(
+const route = createActionApiRoute(
   {
     body: BodySchema,
     params: z.object({
@@ -73,3 +73,5 @@ export const { action } = createActionApiRoute(
       );
   }
 );
+
+export const action = route.action;