From 3496bad0d5ec4e90d49eb8c75aa4a6ab17ea193c Mon Sep 17 00:00:00 2001 From: NiallJoeMaher Date: Sun, 28 Dec 2025 10:16:22 +0100 Subject: [PATCH 1/3] refactor: replace Children.toArray with Array.from for loading components Add jsdom to external packages --- app/(app)/articles/_client.tsx | 10 ++++------ app/(app)/notifications/_client.tsx | 10 ++++------ app/(app)/saved/_client.tsx | 9 +++------ components/SideBar/SideBarSavedPosts.tsx | 10 ++++------ components/TrendingPosts/TrendingPostsLoading.tsx | 9 +++------ next.config.js | 2 ++ 6 files changed, 20 insertions(+), 30 deletions(-) diff --git a/app/(app)/articles/_client.tsx b/app/(app)/articles/_client.tsx index 73e21cd0..78ef1378 100644 --- a/app/(app)/articles/_client.tsx +++ b/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 = () => { )} {status === "pending" && - Children.toArray( - Array.from({ length: 7 }, () => { - return ; - }), - )} + Array.from({ length: 7 }, (_, i) => ( + + ))} {status === "success" && data.pages.map((page) => { return ( diff --git a/app/(app)/notifications/_client.tsx b/app/(app)/notifications/_client.tsx index e2b6e3e8..52126514 100644 --- a/app/(app)/notifications/_client.tsx +++ b/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 = () => {
Something went wrong... Please refresh your page.
)} {status === "pending" && - Children.toArray( - Array.from({ length: 7 }, () => { - return ; - }), - )} + Array.from({ length: 7 }, (_, i) => ( + + ))} {status !== "pending" && noNotifications && (

No new notifications. ✅{" "} diff --git a/app/(app)/saved/_client.tsx b/app/(app)/saved/_client.tsx index 042a2a32..76efd732 100644 --- a/app/(app)/saved/_client.tsx +++ b/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 = () => { Saved items

{bookmarkStatus === "pending" && - Children.toArray( - Array.from({ length: 7 }, () => { - return ; - }), - )} + Array.from({ length: 7 }, (_, i) => ( + + ))} {bookmarkStatus === "error" && (

Something went wrong fetching your saved posts... Refresh the page. diff --git a/components/SideBar/SideBarSavedPosts.tsx b/components/SideBar/SideBarSavedPosts.tsx index 3c152be8..fca498a2 100644 --- a/components/SideBar/SideBarSavedPosts.tsx +++ b/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() {

{bookmarkStatus === "pending" && - Children.toArray( - Array.from({ length: howManySavedToShow }, () => { - return ; - }), - )} + Array.from({ length: howManySavedToShow }, (_, i) => ( + + ))} {bookmarkStatus === "error" && (

Something went wrong fetching your saved posts... Refresh the page. diff --git a/components/TrendingPosts/TrendingPostsLoading.tsx b/components/TrendingPosts/TrendingPostsLoading.tsx index bc4e0242..27d91932 100644 --- a/components/TrendingPosts/TrendingPostsLoading.tsx +++ b/components/TrendingPosts/TrendingPostsLoading.tsx @@ -1,14 +1,11 @@ -import { Children } from "react"; import ArticleLoading from "@/components/ArticlePreview/ArticleLoading"; function LoadingTrendingPosts() { return (

- {Children.toArray( - Array.from({ length: 5 }, () => { - return ; - }), - )} + {Array.from({ length: 5 }, (_, i) => ( + + ))}
); } diff --git a/next.config.js b/next.config.js index 0b1d983b..4e16d7fa 100644 --- a/next.config.js +++ b/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: { From f6945d97647d2b3ff4c1c1051415f946a4e388cc Mon Sep 17 00:00:00 2001 From: NiallJoeMaher Date: Sun, 28 Dec 2025 10:19:26 +0100 Subject: [PATCH 2/3] fix: update import path in next-env.d.ts and standardize quotes in next.config.js --- next-env.d.ts | 2 +- next.config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/next-env.d.ts b/next-env.d.ts index 9edff1c7..c4b7818f 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/types/routes.d.ts"; +import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/next.config.js b/next.config.js index 4e16d7fa..b5bd5a6e 100644 --- a/next.config.js +++ b/next.config.js @@ -21,7 +21,7 @@ const REMOTE_PATTERNS = [ const config = { // Exclude jsdom and isomorphic-dompurify from bundling to fix ESM/CJS compatibility - serverExternalPackages: ['jsdom', 'isomorphic-dompurify'], + serverExternalPackages: ["jsdom", "isomorphic-dompurify"], // Turbopack configuration for SVGR (replaces webpack config) turbopack: { rules: { From 88606c525a73398d89de81dd6a6e017371d2ddc9 Mon Sep 17 00:00:00 2001 From: NiallJoeMaher Date: Sun, 28 Dec 2025 10:22:08 +0100 Subject: [PATCH 3/3] fix: streamline loading component rendering in Articles, Notifications, and SavedPosts pages --- app/(app)/articles/_client.tsx | 4 +--- app/(app)/notifications/_client.tsx | 4 +--- app/(app)/saved/_client.tsx | 4 +--- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/app/(app)/articles/_client.tsx b/app/(app)/articles/_client.tsx index 78ef1378..1eea1c83 100644 --- a/app/(app)/articles/_client.tsx +++ b/app/(app)/articles/_client.tsx @@ -105,9 +105,7 @@ const ArticlesPage = () => {
)} {status === "pending" && - Array.from({ length: 7 }, (_, i) => ( - - ))} + Array.from({ length: 7 }, (_, i) => )} {status === "success" && data.pages.map((page) => { return ( diff --git a/app/(app)/notifications/_client.tsx b/app/(app)/notifications/_client.tsx index 52126514..a5a3dfdc 100644 --- a/app/(app)/notifications/_client.tsx +++ b/app/(app)/notifications/_client.tsx @@ -91,9 +91,7 @@ const Notifications = () => {
Something went wrong... Please refresh your page.
)} {status === "pending" && - Array.from({ length: 7 }, (_, i) => ( - - ))} + Array.from({ length: 7 }, (_, i) => )} {status !== "pending" && noNotifications && (

No new notifications. ✅{" "} diff --git a/app/(app)/saved/_client.tsx b/app/(app)/saved/_client.tsx index 76efd732..7a5a68c0 100644 --- a/app/(app)/saved/_client.tsx +++ b/app/(app)/saved/_client.tsx @@ -32,9 +32,7 @@ const SavedPosts = () => { Saved items

{bookmarkStatus === "pending" && - Array.from({ length: 7 }, (_, i) => ( - - ))} + Array.from({ length: 7 }, (_, i) => )} {bookmarkStatus === "error" && (

Something went wrong fetching your saved posts... Refresh the page.