fixes error on prod: "Uncaught Error: Minified React error #419; visit …

…https://reactjs.org/docs/error-decoder.html?invariant=419 for the full message or use the non-minified dev environment for full errors and additional helpful warnings."
tepachelabs · Jan 14, 2024 · 05727bf · 05727bf
1 parent fe6bb20
commit 05727bf
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dolarenbancos",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "private": true,
   "scripts": {
     "prepare": "panda codegen && husky install",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,12 @@
 import './globals.css'
-import type {Metadata} from 'next'
-import {Anton, Courier_Prime, Montserrat} from 'next/font/google'
-import {ReactNode, Suspense} from 'react'
+import type { Metadata } from 'next'
+import { Anton, Courier_Prime, Montserrat } from 'next/font/google'
+import { ReactNode } from 'react'
 
-import {PHProvider, PostHogPageview} from '~/app/providers'
-import {meta, Prices} from '~/lib/constants'
+import { PHProvider, PostHogPageview } from '~/app/providers'
+import { meta, Prices } from '~/lib/constants'
 
-import {cx} from '../../styled-system/css'
+import { cx } from '../../styled-system/css'
 
 const montserrat = Montserrat({
   subsets: ['latin'],
@@ -27,7 +27,7 @@ const courier = Courier_Prime({
 
 export async function generateMetadata (): Promise<Metadata> {
   // fetch data
-  const today: Prices = await fetch(`${getBaseUrl()}/api/report/now`).then((res) => res.json())
+  const today: Prices = await fetch(`${ getBaseUrl() }/api/report/now`).then((res) => res.json())
 
   return {
     title: meta.title,
@@ -42,24 +42,18 @@ export async function generateMetadata (): Promise<Metadata> {
       url: meta.url,
       type: 'website',
       siteName: meta.title,
-      images: [`${getBaseUrl()}/api/og?price=${today.banxico.buy}`],
+      images: [`${ getBaseUrl() }/api/og?price=${ today.banxico.buy }`],
     },
   } satisfies Metadata
 }
 
-export default function RootLayout ({
-  children,
-}: {
-  children: ReactNode
-}) {
+export default function RootLayout ({ children }: { children: ReactNode }) {
   return (
-    <html lang="es" className={cx(anton.variable, courier.variable, montserrat.variable)}>
-      <Suspense>
-        <PostHogPageview/>
-      </Suspense>
+    <html lang="es" className={ cx(anton.variable, courier.variable, montserrat.variable) }>
       <PHProvider>
         <body>
-          {children}
+          <PostHogPageview/>
+          { children }
         </body>
       </PHProvider>
     </html>

diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import {usePathname, useSearchParams} from 'next/navigation'
+import { usePathname, useSearchParams } from 'next/navigation'
 import posthog from 'posthog-js'
-import {PostHogProvider} from 'posthog-js/react'
-import {useEffect} from 'react'
+import { PostHogProvider, usePostHog } from 'posthog-js/react'
+import { useEffect } from 'react'
 
 if (typeof window !== 'undefined') {
   posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!!, {
@@ -12,29 +12,30 @@ if (typeof window !== 'undefined') {
   })
 }
 
-export function PostHogPageview (): JSX.Element {
+export function PostHogPageview () {
   const pathname = usePathname()
   const searchParams = useSearchParams()
+  const posthog = usePostHog()
 
+  // Track pageviews
   useEffect(() => {
-    if (pathname) {
+    if (pathname && posthog) {
       let url = window.origin + pathname
-      if (searchParams && searchParams.toString()) {
+      if (searchParams.toString()) {
         url = url + `?${searchParams.toString()}`
       }
-      posthog.capture('$pageview', {
-        $current_url: url,
-      })
+      posthog.capture(
+        '$pageview',
+        {
+          '$current_url': url,
+        }
+      )
     }
-  }, [pathname, searchParams])
+  }, [pathname, searchParams, posthog])
 
-  return <></>
+  return null
 }
 
-export function PHProvider ({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return <PostHogProvider client={posthog}>{children}</PostHogProvider>
+export function PHProvider ({ children }: { children: React.ReactNode }) {
+  return <PostHogProvider client={ posthog }>{ children }</PostHogProvider>
 }
diff --git a/src/components/micro-dashboard/components/calculator/calculator.component.tsx b/src/components/micro-dashboard/components/calculator/calculator.component.tsx
@@ -40,12 +40,18 @@ export const Calculator: FC = () => {
         <div>
           <div className={ input }>
             <label htmlFor="mxn">MXN</label>
-            <input type="number" name="mxn" value={ (mxn || referencePrice).toFixed(2) } onChange={ onMxnUpdate }/>
+            <input
+              type="number"
+              id="mxn"
+              name="mxn"
+              value={ (mxn || referencePrice).toFixed(2) }
+              onChange={ onMxnUpdate }
+            />
             { featureCleanButton && isDirty && <button onClick={ onReset } title="Reiniciar cantidad">X</button> }
           </div>
           <div className={ input }>
             <label htmlFor="usd">USD</label>
-            <input type="number" name="usd" value={ usd.toFixed(2) } onChange={ onUsdUpdate }/>
+            <input type="number" id="usd" name="usd" value={ usd.toFixed(2) } onChange={ onUsdUpdate }/>
             { featureCleanButton && isDirty && <button onClick={ onReset } title="Reiniciar cantidad">X</button> }
           </div>
         </div>