Next.js Discord

Discord Forum

React Confetti provider error

Unanswered
Rex posted this in #help-forum
Open in Discord
Avatar
RexOP
Does anyone knows the Confetti error in lms-clone?
⨯ components\providers\confetti-provider.tsx (10:17) @ window
 ⨯ ReferenceError: window is not defined
    at ConfettiProvider (./components/providers/confetti-provider.tsx:15:19)
digest: "3081587238"
   8 |   const confetti = useConfettiStore();
   9 |
> 10 |   const width = window.innerWidth;
     |                 ^
  11 |   const height = window.innerHeight;
  12 |
  13 |   if (!confetti.isOpen) return null;

9 Replies

Avatar
Cape lion
can you show your code
Avatar
averydelusionalperson
is that confettiprovider a client component?
Avatar
RexOP
yes, it's this one:
'use client';

import ReactConfetti from 'react-confetti';

import { useConfettiStore } from '@/hooks/use-confetti-store';

export const ConfettiProvider = () => {
  const confetti = useConfettiStore();

  const width = window.innerWidth;
  const height = window.innerHeight;

  if (!confetti.isOpen) return null;

  return (
    <ReactConfetti
      className="pointer-events-none z-[100]"
      numberOfPieces={500}
      recycle={false}
      width={width}
      height={height}
      onConfettiComplete={() => {
        confetti.onClose();
      }}
    />
  );
};
Avatar
averydelusionalperson
Try importing the component where you are using it without any SSR. https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr
Avatar
RexOP
no, it gives errors:
⨯ app\layout.tsx (23:12) @ ConfettiProvider
⨯ ReferenceError: ConfettiProvider is not defined
at RootLayout (./app/layout.tsx:29:97)
at stringify (<anonymous>)
digest: "3232129468"
21 | <html lang="en">
22 | <body className={inter.className}>
23 | <ConfettiProvider />
| ^
24 | <ToastProvider />
25 | {children}
26 | </body>
Avatar
averydelusionalperson
The ConfettiProvider should be same as the variable name you are assigning to the dynamically imported component
Image
Avatar
RexOP
yes sorry, this is the error message:
⨯ Internal error: Error: Unsupported Server Component type: Module
    at e (D:\Programming\Personal\UniScriber\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:268661)
    at e (D:\Programming\Personal\UniScriber\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:268557)
    at eF (D:\Programming\Personal\UniScriber\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:268712)
    at eq (D:\Programming\Personal\UniScriber\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:274676)
    at eJ (D:\Programming\Personal\UniScriber\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:275293)
    at Timeout._onTimeout (D:\Programming\Personal\UniScriber\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:265080)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
digest: "2054097940"
this is the code where I call the Component:
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { ClerkProvider } from '@clerk/nextjs';
import { ToastProvider } from '@/components/providers/toaster-provider';
const inter = Inter({ subsets: ['latin'] });

import dynamic from 'next/dynamic';

const ConfettiProvider = dynamic(
  () => import('@/components/providers/confetti-provider'),
  {
    ssr: false,
  }
);

export const metadata: Metadata = {
  title: 'UniScriber',
  description: 'Transcribe university lessons effortlessly.',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body className={inter.className}>
          <ConfettiProvider />
          <ToastProvider />
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}