#React Confetti provider error

10 messages · Page 1 of 1 (latest)

true onyx
#

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;
hexed hazelBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

tepid robin
#

can you show your code

foggy pagoda
true onyx
# foggy pagoda is that confettiprovider a client component?

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();
      }}
    />
  );
};
foggy pagoda
true onyx
foggy pagoda
true onyx
# foggy pagoda The `ConfettiProvider` should be same as the variable name you are assigning to ...

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"