0

I have followed the instructions on this site -> https://whatamesh.vercel.app/

I am trying to get this gradient as a background on a landing page I am building in next.js, but I am getting an error(TypeError: Cannot read properties of undefined (reading 'getDeclaration')) when I run the code and view the page. Below is a simplified version of how I am trying to implement it

import { Gradient } from "./Gradient.js";

    export default function LandingHero() {
    
      if (typeof window !== "undefined") {
       const gradient = new Gradient();
       gradient.initGradient("#gradient-canvas")
      };
      

      return (
        <div>
         <h1>title</h1>

         <div className="h-screen w-screen">
         <canvas id="gradient-canvas" data-transition-in />
        </div>

       </div>
  );
}

I assumed its because the document object was not ready upon loading because of ssr, so Im thinking i need to either use the useEffect hook, or dynamic loading... but I am unsure of what is going on. Am I able to use this gradient as a background without hurting the SEO of my site?

GHussy
  • 1
  • 1
  • 1
    You should dynamically import `Gradient.js` inside a `useEffect`. See [Dynamically import abcjs in Next.js](https://stackoverflow.com/questions/67402056/dynamically-import-abcjs-in-next-js) for an example. That should not have any impact on SEO. – juliomalves Sep 11 '22 at 15:03

0 Answers0