feat(web): fixed type errors and updated turbo.json

Author: Davidthecode

apps/web/app/(main)/project-invite/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import PageClient from "./page-client";
 
 export const metadata = {
@@ -6,7 +7,15 @@ export const metadata = {
 };
 
 function Page() {
-  return <PageClient />;
+  <Suspense
+    fallback={
+      <div className="flex min-h-screen items-center justify-center">
+        <p>Loading...</p>
+      </div>
+    }
+  >
+    <PageClient />
+  </Suspense>;
 }
 
 export default Page;

apps/web/app/(main)/projects/[project]/flags/[flag]/page-client.tsx

@@ -36,7 +36,7 @@ function PageClient() {
   const { currentEnvironment, allEnvironments } = useCurrentEnvironment();
 
   // This is the project/workspace active environment, the actual Writable Environment
-  const USER_WORKSPACE_ENV = currentEnvironment.name;
+  const USER_WORKSPACE_ENV = currentEnvironment?.name;
 
   // This tracks the environment currently displayed in the CONFIG section dropdown.
   const [viewingEnvironmentName, setViewingEnvironmentName] = useState<
@@ -45,7 +45,7 @@ function PageClient() {
 
   // This derives the environment name used for the API call and display.
   const displayEnvironmentName =
-    viewingEnvironmentName || currentEnvironment?.name;
+    viewingEnvironmentName || currentEnvironment?.name || "development";
 
   const isEditable = displayEnvironmentName === USER_WORKSPACE_ENV;
 
@@ -239,7 +239,10 @@ function PageClient() {
 
   const handleRuleOrderUpdate = useCallback(
     (newRules: TargetingRule[]) => {
-      const ruleIdsInNewOrder = newRules.map((r) => r.id);
+      const ruleIdsInNewOrder = newRules
+        .map((r) => r.id)
+        .filter((id): id is string => Boolean(id));
+
       reorderRulesMutation.mutate({ ruleIdsInNewOrder });
     },
     [reorderRulesMutation]

apps/web/app/(main)/projects/[project]/flags/page-client.tsx

@@ -28,7 +28,7 @@ function FlagsPageClient() {
     isLoading,
     isError,
   } = useQuery<FlagType[]>({
-    queryKey: projectId ? QUERY_KEYS.FLAGS(projectId) : undefined,
+    queryKey: QUERY_KEYS.FLAGS(projectId),
     queryFn: () =>
       api.get(`/api/flags?projectId=${projectId}`).then((res) => res.data),
     enabled: Boolean(projectId),
@@ -62,7 +62,7 @@ function FlagsPageClient() {
   );
 
   const handleCreateFlag = (key: string, description: string) => {
-    if (flags.some((flag) => flag.key === key)) {
+    if (flagList.some((flag) => flag.key === key)) {
       toast.error(`Flag with key '${key}' already exists.`);
       return;
     }

apps/web/app/(main)/projects/[project]/page-client.tsx

@@ -21,6 +21,26 @@ export default function ProjectDashboardPage() {
     enabled: !!projectId,
   });
 
+  if (isLoading) {
+    return (
+      <div>
+        <DashboardSkeleton />
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-center text-red-600">
+        <h2 className="mb-2 font-semibold text-xl">Failed to Load Dashboard</h2>
+        <p className="text-gray-600">
+          We couldn't retrieve the project metrics. Please check your connection
+          or try again.
+        </p>
+      </div>
+    );
+  }
+
   const METRICS_MAP: {
     [key in keyof typeof data.metrics]: {
       title: string;
@@ -55,26 +75,6 @@ export default function ProjectDashboardPage() {
     },
   };
 
-  if (isLoading) {
-    return (
-      <div>
-        <DashboardSkeleton />
-      </div>
-    );
-  }
-
-  if (isError || !data) {
-    return (
-      <div className="flex flex-col items-center justify-center py-16 text-center text-red-600">
-        <h2 className="mb-2 font-semibold text-xl">Failed to Load Dashboard</h2>
-        <p className="text-gray-600">
-          We couldn't retrieve the project metrics. Please check your connection
-          or try again.
-        </p>
-      </div>
-    );
-  }
-
   const dashboardMetrics = (
     Object.keys(data.metrics) as Array<keyof typeof data.metrics>
   ).map((key) => {

apps/web/components/flags/main/sortable-rule-list.tsx

@@ -17,7 +17,7 @@ const arrayMove = <T,>(arr: T[], from: number, to: number): T[] => {
 };
 
 type SortableItemProps = {
-  rule: TargetingRule;
+  rule: TargetingRule & { id: string };
   variations: FlagVariation[];
   isEditable: boolean;
   isDeletingRule: boolean;
@@ -82,7 +82,10 @@ export const SortableRuleList = ({
   onRuleOrderChange,
   ...cardProps
 }: SortableRuleListProps) => {
-  const ruleIds = rules.map((r) => r.id);
+  const validRules = rules.filter((r): r is TargetingRule & { id: string } =>
+    Boolean(r.id)
+  );
+  const ruleIds = validRules.map((r) => r.id);
 
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
@@ -101,7 +104,7 @@ export const SortableRuleList = ({
     <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
       <SortableContext items={ruleIds} strategy={verticalListSortingStrategy}>
         <div className="space-y-3">
-          {rules.map((rule) => (
+          {validRules.map((rule) => (
             <SortableItem key={rule.id} rule={rule} {...cardProps} />
           ))}
         </div>

apps/web/lib/flagix.ts

@@ -1,5 +1,17 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  outputFileTracingRoot: path.join(__dirname, "../../"),
+  transpilePackages: [
+    "@flagix/react",
+    "@flagix/js-sdk",
+    "@flagix/evaluation-core",
+  ],
   images: {
     remotePatterns: [
       {

apps/web/next.config.js

@@ -5,7 +5,7 @@
     "build": {
       "dependsOn": ["^build"],
       "inputs": ["$TURBO_DEFAULT$", ".env*"],
-      "outputs": [".next/**", "!.next/cache/**"]
+      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
     },
     "lint": {
       "dependsOn": ["^lint"]