Describe your question/issue in detail
I have typed the exact code installed what you said in E-Commerce soda project but im facing hydration error
Is it Because i have intsalled something which i shouldnt have or is it something related to next js recent update
Impacted feature
I cannot locate from where am i getting the hydration error
Errors
This is my code on index.tsx =>"use client";
import { asText, Content } from "@prismicio/client";
import { PrismicNextImage } from "@prismicio/next";
import { PrismicRichText, SliceComponentProps } from "@prismicio/react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { Bounded } from "@/components/Bounded";
import Button from "@/components/Button";
import { TextSplitter } from "./TextSplitter";
gsap.registerPlugin(useGSAP, ScrollTrigger);
/**
- Props for
Hero.
*/
export type HeroProps = SliceComponentProps<Content.HeroSlice>;
/**
- Component for "Hero" Slices.
*/
const Hero = ({ slice }: HeroProps): JSX.Element => {
useGSAP(() => {
const introTl = gsap.timeline();
introTl
.set(".hero", { opacity: 1 })
.from(".hero-header-word", {
scale: 3,
opacity: 0,
ease: "power4.in",
delay: 0.3,
stagger: 1,
})
.from(
".hero-subheading",
{
opacity: 0,
y: 30,
},
"+=.8",
)
.from(".hero-body", {
opacity: 0,
y: 10,
})
.from(".hero-button", {
opacity: 0,
y: 10,
duration: 0.6,
});
const scrollTl = gsap.timeline({
scrollTrigger: {
trigger: ".hero",
start: "top top",
end: "bottom bottom",
scrub: 1.5,
},
});
scrollTl
.fromTo(
"body",
{
backgroundColor: "#FDE047",
},
{
backgroundColor: "#D9F99D",
overwrite: "auto",
},
1,
)
.from(".text-side-heading .split-char", {
scale: 1.3,
y: 40,
rotate: -25,
opacity: 0,
stagger: 0.1,
ease: "back.out(3)",
duration: 0.5,
})
.from(".text-side-body", {
y: 20,
opacity: 0,
});
});
return (
<Bounded
data-slice-type={slice.slice_type}
data-slice-variation={slice.variation}
className="hero opacity-0"
>
<div className="grid">
<div className="grid h-screen place-items-center">
<div className="grid auto-rows-min place-items-center text-center">
<h1 className="hero-header text-7xl font-black uppercase leading-[.8] text-orange-500 md:text-[9rem] lg:text-[13rem]">
<TextSplitter
text={asText(slice.primary.heading)}
wordDisplayStyle="block"
className="hero-header-word"
/>
</h1>
<div className="hero-subheading mt-12 text-5xl font-semibold text-sky-950 lg:text-6xl">
<PrismicRichText field={slice.primary.subheading} />
</div>
<div className="hero-body text-2xl font-normal text-sky-950">
<PrismicRichText field={slice.primary.body} />
</div>
<Button
buttonLink={slice.primary.button_link}
buttonText={slice.primary.button_text}
className="hero-button mt-12"
/>
</div>
</div>
<div className="text-side relative z-[80] grid h-screen items-center gap-4 md:grid-cols-2">
<PrismicNextImage
className="w-full md:hidden"
field={slice.primary.cans_image}
/>
<div>
<h2 className="text-side-heading text-balance text-6xl font-black uppercase text-sky-950 lg:text-8xl">
<TextSplitter text={asText(slice.primary.second_heading)} />
</h2>
<div className="text-side-body mt-4 max-w-xl text-balance text-xl font-normal text-sky-950">
<PrismicRichText field={slice.primary.second_body} />
</div>
</div>
</div>
</div>
</Bounded>
);
};
export default Hero;
Package.json file=>
{
"name": "nextjs-starter-prismic-minimal",
"version": "0.1.0",
"private": true,
"license": "Apache-2.0",
"author": "Prismic <contact@prismic.io> (https://prismic.io)",
"scripts": {
"dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta",
"next:dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"slicemachine": "start-slicemachine",
"format": "prettier --write ."
},
"dependencies": {
"@gsap/react": "^2.1.1",
"@prismicio/client": "^7.13.1",
"@prismicio/next": "^1.7.1",
"@prismicio/react": "^2.9.1",
"@react-three/drei": "^9.120.6",
"@react-three/fiber": "^8.17.12",
"@types/three": "^0.172.0",
"clsx": "^2.1.1",
"gsap": "^3.12.5",
"next": "^15.0.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"three": "^0.172.0"
},
"devDependencies": {
"@slicemachine/adapter-next": "^0.3.61",
"@types/node": "^22.8.6",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"autoprefixer": "^10.4.20",
"concurrently": "^9.0.1",
"eslint": "^9.13.0",
"eslint-config-next": "^15.0.2",
"postcss": "^8.4.49",
"prettier": "^3.4.2",
"prettier-plugin-tailwindcss": "^0.6.9",
"r3f-perf": "^7.2.3",
"slice-machine-ui": "^2.11.1",
"tailwindcss": "^3.4.17",
"typescript": "^5.6.3"
}
}
Steps to reproduce
type or paste code here
