Turns out I needed to change the ThemeProvider code, delete React Developer Tools, and Privacy Extension. Now hydration and weird installHook.js.map errors are gone

This commit is contained in:
Ryan Pandya 2024-12-03 11:21:13 -08:00
parent 57faa14f0c
commit e532719905
3 changed files with 16 additions and 7 deletions

View File

@ -4,18 +4,20 @@ import { TRPCError } from "@trpc/server";
import DayView from "@/components/dashboard/days/DayView"; import DayView from "@/components/dashboard/days/DayView";
import spacetime from "spacetime"; import spacetime from "spacetime";
import { useTimezone } from "@lifetracker/shared-react/hooks/timezones"; import { useTimezone } from "@lifetracker/shared-react/hooks/timezones";
import { date } from "drizzle-orm/pg-core";
export default async function DayPage({ params }: { params: { dateQuery: string }; }) { export default async function DayPage({ params }: { params: { dateQuery: string }; }) {
const { dateQuery } = await params; const { dateQuery } = await params;
let day; let day;
const tzName = await api.users.getTimezone(); const tzName = await api.users.getTimezone();
console.log(`Displaying ${spacetime.now(tzName).format("yyyy-MM-dd")} in ${tzName}.`); // console.log(`(dashboard/day/[dateQuery]/page.tsx) Loading ${spacetime.now(tzName).format("yyyy-MM-dd")} in ${tzName}.`);
try { try {
day = await api.days.get({ day = await api.days.get({
dateQuery: spacetime(dateQuery, tzName).format("yyyy-MM-dd"), dateQuery: spacetime(dateQuery, tzName).format("yyyy-MM-dd"),
timezone: tzName, timezone: tzName,
}); });
} catch (e) { } catch (e) {
console.log("DATEQ", params);
if (e instanceof TRPCError) { if (e instanceof TRPCError) {
if (e.code == "NOT_FOUND") { if (e.code == "NOT_FOUND") {
notFound(); notFound();

View File

@ -52,7 +52,7 @@ export default async function RootLayout({
}>) { }>) {
const session = await getServerAuthSession(); const session = await getServerAuthSession();
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<Providers <Providers
session={session} session={session}

View File

@ -1,11 +1,18 @@
"use client"; 'use client'
import type { ThemeProviderProps } from "next-themes/dist/types"; import * as React from 'react'
import * as React from "react"; const NextThemesProvider = dynamic(
import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"; () => import('next-themes').then((e) => e.ThemeProvider),
{
ssr: false,
}
)
import { useTheme } from 'next-themes'
import { type ThemeProviderProps } from 'next-themes/dist/types'
import dynamic from 'next/dynamic'
export function ThemeProvider({ children, ...props }: ThemeProviderProps) { export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>; return <NextThemesProvider {...props}>{children}</NextThemesProvider>
} }
export function useToggleTheme() { export function useToggleTheme() {