window is not defined on SSR with NextJS

[gokhancelikkaya]

The component works fine but with an error when using with NextJS 13. It is because it tries to access window on SSR part. The error happens only when reloading the page and error is logged on the server side (not on browser console).

 ⨯ node_modules/react-share-on-social/dist/react-share-on-social.cjs.development.js (480:0) @ eval
 ⨯ ReferenceError: window is not defined
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42)
    at eval (./src/components/modal/social-bar.tsx:11:79)
    at (ssr)/./src/components/modal/social-bar.tsx (.next/server/app/(blog)/[blog]/page.js:401:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42)
    at eval (./src/components/post/post.tsx:18:76)
    at (ssr)/./src/components/post/post.tsx (.next/server/app/(blog)/[blog]/page.js:478:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42)
    at eval (./src/components/blog/blog-timeline.tsx:7:79)
    at (ssr)/./src/components/blog/blog-timeline.tsx (.next/server/app/(blog)/[blog]/page.js:214:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42)

[fonzarely]

Same issue for me, and I could not manage to propose a fix.
The component looks great any way.

[kassemitani]

Same issue with NextJS

[nikolai-vysotskyi]

@kassemitani @fonzarely @gokhancelikkaya

If anyone runs into this problem on nextjs, just make only this component render on client:

    import dynamic from "next/dynamic";
    
    const DynamicShareOnSocial = dynamic(
        () => import('react-share-on-social'),
        {ssr: false}
    );

and then use it the same way:

     <DynamicShareOnSocial
      textToShare="Check out this new wardrobe I just found from IKEA!"
      link="https://ikea.com/wardrobes/kalle"
      linkTitle="KALLE Wardorbe which chooses your clothes for you using AI - IKEA"
      linkMetaDesc="Stop going through the agony of choosing clothes that fit the weather and your mood."
      linkFavicon={favicon}
      noReferer
    >
      <button>Share this product</button>
    </DynamicShareOnSocial>

[manolo-battista]

@kassemitani @fonzarely @gokhancelikkaya

If anyone runs into this problem on nextjs, just make only this component render on client:

    import dynamic from "next/dynamic";
    
    const DynamicShareOnSocial = dynamic(
        () => import('react-share-on-social'),
        {ssr: false}
    );

and then use it the same way:

     <DynamicShareOnSocial
      textToShare="Check out this new wardrobe I just found from IKEA!"
      link="https://ikea.com/wardrobes/kalle"
      linkTitle="KALLE Wardorbe which chooses your clothes for you using AI - IKEA"
      linkMetaDesc="Stop going through the agony of choosing clothes that fit the weather and your mood."
      linkFavicon={favicon}
      noReferer
    >
      <button>Share this product</button>
    </DynamicShareOnSocial>

I try it, it doesn't work on Next.js 14.2.3

[manolo-battista]

@manolo-battista do you use "use client"; in the component where you call it? If not, try this. This way works with pages router, I can test with app router in few hours

Yes, I tried with use client, this is my component:

"use client";
import ShareIcon from "@/components/icons/ShareIcon";
import Button from "@/components/ui/Button";
import { cn } from "@/lib/cn";
import { IFile } from "@/types/File";
import React from "react";
import dynamic from "next/dynamic";
    
const ShareOnSocial = dynamic(
      () => import('react-share-on-social'),
      {ssr: false}
);

export default function ShareMeetup({
  styleBtn,
  image,
  title,
  description,
}: {
  styleBtn?: string;
  image: string | IFile;
  title: string;
  description?: string;
}) {
  return (
    // TODO: temporary fix for window undefined on SSR
    typeof window !== "undefined" && (
      <ShareOnSocial
        textToShare="Ciao! Vuoi partecipare a questo meetup?"
        link={window.location.href}
        linkTitle={title}
        linkFavicon={image}
        copyToClipboardText="Copia link"
        copySuccessText="Copiato"
        linkMetaDesc={description}
        shareTo={[
          "whatsapp",
          "linkedin",
          "telegram",
          "facebook",
          "twitter",
          "email",
        ]}
        closeText="Chiudi">
        <Button
          className={cn(
            "bg-primary border-none text-background w-full",
            styleBtn,
          )}
          startAdornment={<ShareIcon />}>
          Share
        </Button>
      </ShareOnSocial>
    )
  );
}