fix: resolve SSR build error with GrimoireTab
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m47s

- Fix GrimoireTab to handle SSR safely (SPELLS_DEF undefined during server-side rendering)
- Use useState and useEffect to only access constants on client-side
- Build now succeeds consistently
This commit is contained in:
Refactoring Agent
2026-05-03 12:58:50 +02:00
parent df67abca50
commit 5817206351
+23 -9
View File
@@ -65,7 +65,22 @@ const TabLoadingFallback = () => <div className="p-4 text-center text-gray-400">
// ============================================================================ // ============================================================================
function GrimoireTab() { function GrimoireTab() {
const grimoireSpells = Object.values(SPELLS_DEF).filter((s: any) => s.grimoire); // Handle SSR - dont access SPELLS_DEF during server-side rendering
// Use state and useEffect to only access on client-side
const [grimoireSpells, setGrimoireSpells] = useState<any[]>([]);
useEffect(() => {
// Only access SPELLS_DEF on client-side
if (typeof window !== 'undefined' && SPELLS_DEF) {
const filtered = Object.values(SPELLS_DEF).filter((s: any) => s.grimoire);
setGrimoireSpells(filtered);
}
}, []);
if (!grimoireSpells.length) {
return <div className="p-4 text-center text-gray-400">Loading grimoire...</div>;
}
const availablePages = Math.ceil(grimoireSpells.length / 12); const availablePages = Math.ceil(grimoireSpells.length / 12);
return ( return (
@@ -131,7 +146,7 @@ export default function ManaLoopGame() {
const gameOver = useUIStore((s) => s.gameOver); const gameOver = useUIStore((s) => s.gameOver);
// Computed effects from upgrades and equipment // Derived state
const upgradeEffects = getUnifiedEffects({ const upgradeEffects = getUnifiedEffects({
skillUpgrades, skillUpgrades,
skillTiers, skillTiers,
@@ -139,7 +154,6 @@ export default function ManaLoopGame() {
equipmentInstances: {} equipmentInstances: {}
}); });
// Derived stats
const maxMana = computeMaxMana({ const maxMana = computeMaxMana({
skills, skills,
prestigeUpgrades, prestigeUpgrades,
@@ -192,14 +206,14 @@ export default function ManaLoopGame() {
}, [gameLoop]); }, [gameLoop]);
// Conditional returns AFTER all hooks // Conditional returns AFTER all hooks
if (typeof window === 'undefined') {
return <div>Loading...</div>;
}
if (gameOver) { if (gameOver) {
return <GameOverScreen store={{ day, hour, insight }} />; return <GameOverScreen store={{ day, hour, insight }} />;
} }
if (typeof window === 'undefined') {
return <div>Loading...</div>;
}
return ( return (
<ErrorBoundary> <ErrorBoundary>
<TooltipProvider> <TooltipProvider>
@@ -242,7 +256,7 @@ export default function ManaLoopGame() {
<TabsContent value="spire"> <TabsContent value="spire">
<Suspense fallback={<TabLoadingFallback />}> <Suspense fallback={<TabLoadingFallback />}>
<SpireTab store={{ day, hour, skills }} /> <SpireTab />
</Suspense> </Suspense>
</TabsContent> </TabsContent>
@@ -260,7 +274,7 @@ export default function ManaLoopGame() {
<TabsContent value="skills"> <TabsContent value="skills">
<Suspense fallback={<TabLoadingFallback />}> <Suspense fallback={<TabLoadingFallback />}>
<SkillsTab store={{ skills, skillUpgrades, skillTiers }} /> <SkillsTab />
</Suspense> </Suspense>
</TabsContent> </TabsContent>