fix(web): resolve leaderboard production crashes by removing react-animated-numbers

Remove react-animated-numbers dependency which caused production-only crashes due to CommonJS/ESM interop issues with Vite's production bundler. Replace animated score displays with simple toLocaleString() formatting.

Also add missing +config.ts to disable SSR for the leaderboard page, fixing 307 redirect loop caused by SSR/prerender configuration mismatch.

Changes:
- Remove react-animated-numbers from package.json
- Add web/pages/leaderboard/+config.ts with ssr: false
- Replace AnimatedNumbers component with direct number formatting
- Simplify leaderboard score display (no animation, instant render)
This commit is contained in:
Ryan Walters
2025-11-23 01:15:15 -06:00
parent 984a2e95ca
commit cb50ade88f
4 changed files with 7 additions and 26 deletions

View File

@@ -1,8 +1,5 @@
import { useState } from "react";
import { IconTrophy, IconCalendar } from "@tabler/icons-react";
import { clientOnly } from "vike-react/clientOnly";
const AnimatedNumbers = clientOnly(() => import("react-animated-numbers"));
interface LeaderboardEntry {
id: number;
@@ -238,15 +235,7 @@ function LeaderboardTable({ data }: { data: LeaderboardEntry[] }) {
</td>
<td className="py-2">
<span className="text-yellow-300 font-[600] text-lg">
<AnimatedNumbers
fallback={<span className="text-transparent">{entry.score.toLocaleString()}</span>}
useThousandsSeparator
transitions={(digitIndex) => ({
type: "easeIn",
duration: 0.75 + digitIndex * 0.25 + entryIndex * 0.2,
})}
animateToNumber={entry.score}
/>
{entry.score.toLocaleString()}
</span>
</td>
<td className="py-2">

View File

@@ -0,0 +1,6 @@
import type { Config } from "vike/types";
export default {
prerender: true, // Generate static HTML for deployment
ssr: false, // Force client-side only rendering
} satisfies Config;