refactor: replace Children.toArray with Array.from for loading components

Add jsdom to external packages

Author: NiallJoeMaher

app/(app)/articles/_client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Children, Fragment, useEffect } from "react";
+import { Fragment, useEffect } from "react";
 import { TagIcon } from "@heroicons/react/20/solid";
 import ArticlePreview from "@/components/ArticlePreview/ArticlePreview";
 import ArticleLoading from "@/components/ArticlePreview/ArticleLoading";
@@ -105,11 +105,9 @@ const ArticlesPage = () => {
                 </div>
               )}
               {status === "pending" &&
-                Children.toArray(
-                  Array.from({ length: 7 }, () => {
-                    return <ArticleLoading />;
-                  }),
-                )}
+                Array.from({ length: 7 }, (_, i) => (
+                  <ArticleLoading key={i} />
+                ))}
               {status === "success" &&
                 data.pages.map((page) => {
                   return (

app/(app)/notifications/_client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Children, Fragment, useEffect } from "react";
+import { Fragment, useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 import { CheckCircleIcon } from "@heroicons/react/20/solid";
 import { Temporal } from "@js-temporal/polyfill";
@@ -91,11 +91,9 @@ const Notifications = () => {
             <div>Something went wrong... Please refresh your page.</div>
           )}
           {status === "pending" &&
-            Children.toArray(
-              Array.from({ length: 7 }, () => {
-                return <Placeholder />;
-              }),
-            )}
+            Array.from({ length: 7 }, (_, i) => (
+              <Placeholder key={i} />
+            ))}
           {status !== "pending" && noNotifications && (
             <p className="text-lg font-semibold text-neutral-900 dark:text-neutral-50">
               No new notifications. ✅{" "}

app/(app)/saved/_client.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Children } from "react";
 import ArticlePreview from "@/components/ArticlePreview/ArticlePreview";
 import { api } from "@/server/trpc/react";
 import PageHeading from "@/components/PageHeading/PageHeading";
@@ -33,11 +32,9 @@ const SavedPosts = () => {
       <PageHeading>Saved items</PageHeading>
       <div>
         {bookmarkStatus === "pending" &&
-          Children.toArray(
-            Array.from({ length: 7 }, () => {
-              return <ArticleLoading />;
-            }),
-          )}
+          Array.from({ length: 7 }, (_, i) => (
+            <ArticleLoading key={i} />
+          ))}
         {bookmarkStatus === "error" && (
           <p className="py-4 font-medium">
             Something went wrong fetching your saved posts... Refresh the page.

components/SideBar/SideBarSavedPosts.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { api } from "@/server/trpc/react";
-import React, { Children } from "react";
+import React from "react";
 
 import SideBarSavedArticlePreview from "./SideBarSavedArticlePreview";
 import Link from "next/link";
@@ -22,11 +22,9 @@ export default React.memo(function SideBarSavedPosts() {
       </h3>
       <div className="w-full">
         {bookmarkStatus === "pending" &&
-          Children.toArray(
-            Array.from({ length: howManySavedToShow }, () => {
-              return <LoadingSkeleton />;
-            }),
-          )}
+          Array.from({ length: howManySavedToShow }, (_, i) => (
+            <LoadingSkeleton key={i} />
+          ))}
         {bookmarkStatus === "error" && (
           <p className="py-4 font-medium">
             Something went wrong fetching your saved posts... Refresh the page.

components/TrendingPosts/TrendingPostsLoading.tsx

@@ -1,14 +1,11 @@
-import { Children } from "react";
 import ArticleLoading from "@/components/ArticlePreview/ArticleLoading";
 
 function LoadingTrendingPosts() {
   return (
     <div>
-      {Children.toArray(
-        Array.from({ length: 5 }, () => {
-          return <ArticleLoading />;
-        }),
-      )}
+      {Array.from({ length: 5 }, (_, i) => (
+        <ArticleLoading key={i} />
+      ))}
     </div>
   );
 }

next.config.js

@@ -20,6 +20,8 @@ const REMOTE_PATTERNS = [
 }));
 
 const config = {
+  // Exclude jsdom and isomorphic-dompurify from bundling to fix ESM/CJS compatibility
+  serverExternalPackages: ['jsdom', 'isomorphic-dompurify'],
   // Turbopack configuration for SVGR (replaces webpack config)
   turbopack: {
     rules: {