mlynch / nextjs-tailwind-ionic-capacitor-starter

A starting point for building an iOS, Android, and Progressive Web App with Tailwind CSS, React w/ Next.js, Ionic Framework, and Capacitor
https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-ionic-framework-and-capacitor-3kij
MIT License
1.72k stars 349 forks source link

Hydration error #50

Open JeroenMoonen opened 1 year ago

JeroenMoonen commented 1 year ago

When navigating to a specific page using routerLink, everything goes well. When manually refreshing the page, I get an Hydration error. How do I solve this issue?

The error:

Screenshot 2023-09-21 at 09 52 07

The content of the page, where the Hydration error occurs:

import {
  IonBackButton,
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import React from 'react';

export default function Schedule(): React.JSX.Element {
  return (
    <>
      <IonPage>
        <IonHeader>
          <IonToolbar color="light">
            <IonButtons slot="start">
              <IonBackButton defaultHref="/"></IonBackButton>
            </IonButtons>
            <IonTitle>Schedule</IonTitle>
            <IonButtons slot="end">
              <IonButton routerLink="/booking/create">Create</IonButton>
            </IonButtons>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" color="light" role="feed">
          <h2>Lorem ipsum</h2>
          <p className="medium grey">Dolor sit amet.</p>
        </IonContent>
      </IonPage>
    </>
  );
}
MDxWARRIORxOP commented 11 months ago

Having the exact same error with ion-toolbar. Anyone find a solution yet?