fix: resolve SSR build error with GrimoireTab
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m47s
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:
+23
-9
@@ -65,7 +65,22 @@ const TabLoadingFallback = () => <div className="p-4 text-center text-gray-400">
|
||||
// ============================================================================
|
||||
|
||||
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);
|
||||
|
||||
return (
|
||||
@@ -131,7 +146,7 @@ export default function ManaLoopGame() {
|
||||
|
||||
const gameOver = useUIStore((s) => s.gameOver);
|
||||
|
||||
// Computed effects from upgrades and equipment
|
||||
// Derived state
|
||||
const upgradeEffects = getUnifiedEffects({
|
||||
skillUpgrades,
|
||||
skillTiers,
|
||||
@@ -139,7 +154,6 @@ export default function ManaLoopGame() {
|
||||
equipmentInstances: {}
|
||||
});
|
||||
|
||||
// Derived stats
|
||||
const maxMana = computeMaxMana({
|
||||
skills,
|
||||
prestigeUpgrades,
|
||||
@@ -192,14 +206,14 @@ export default function ManaLoopGame() {
|
||||
}, [gameLoop]);
|
||||
|
||||
// Conditional returns AFTER all hooks
|
||||
if (typeof window === 'undefined') {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (gameOver) {
|
||||
return <GameOverScreen store={{ day, hour, insight }} />;
|
||||
}
|
||||
|
||||
if (typeof window === 'undefined') {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<TooltipProvider>
|
||||
@@ -242,7 +256,7 @@ export default function ManaLoopGame() {
|
||||
|
||||
<TabsContent value="spire">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<SpireTab store={{ day, hour, skills }} />
|
||||
<SpireTab />
|
||||
</Suspense>
|
||||
</TabsContent>
|
||||
|
||||
@@ -260,7 +274,7 @@ export default function ManaLoopGame() {
|
||||
|
||||
<TabsContent value="skills">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<SkillsTab store={{ skills, skillUpgrades, skillTiers }} />
|
||||
<SkillsTab />
|
||||
</Suspense>
|
||||
</TabsContent>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user