Error when rendering the page. | Astro Lounge | Page 1

rich steppe Mar 31, 2024, 4:14 PM

The page uses a React component to switch themes and then the page shows this error:

<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
<script data-astro-exec="">(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var v=Object.defineProperty;var A=(c,s,a)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:a}):c[s]=a;var l=(c,s,a)=>(A(c,typeof s!="symbol"?s+"":s,a),a);var m;{let c={0:t=>y(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},s=t=>{let[e,n]=t;return e in c?c[e](n):void 0},a=t=>t.map(s),y=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([e,n])=>[e,s(n)]));customElements.get("astro-island")||customElements.define("astro-island",(m=class extends HTMLElement{constructor()...</script>

Here is the astro component code:

  <li class="h-10 rounded-lg mb-5">
     <ThemeToggler client:load/> <- React componet
  </li>

Supplementary React component code:

import { useEffect, useState } from 'react'
// sunIcon <-SVG componet
// moonIcon <-SVG componet
function ThemeToggle() {
  const [theme, setTheme] = useState('light')
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
    const storedTheme = localStorage.getItem('theme') ?? 'light'
    setTheme(storedTheme)
    setIsMounted(true)
  }, [])

  useEffect(() => {
    if (isMounted) {
      document.documentElement.classList.toggle('dark', theme === 'dark')
      localStorage.setItem('theme', theme)
    }
  }, [theme, isMounted])

  const handleClick = () => {
    setTheme(currentTheme => (currentTheme === 'light' ? 'dark' : 'light'))
  }

  if (!isMounted)
    return <span>...</span>

  return (
    <button onClick={handleClick} className="flex items-center justify-center flex-row gap-3">
      <p
        className="text-xl text-neutral-700 opacity-75 hover:opacity-100 aria-pressed:opacity-100 dark:text-neutral-50"
      >
        Theme
      </p>
      {theme === 'light' ? sunIcon() : moonIcon()}
    </button>
  )
}
export default ThemeToggle

#Error when rendering the page.