The preview is showing the following runtime errors:
[2026-04-09T07:31:41.022Z] ./components/ui/flip-button.tsx:6:1
Module not found: Can't resolve 'canvas-confetti'
4 | import { motion } from 'framer-motion'
5 | import { Check } from 'lucide-react'
> 6 | import confetti from 'canvas-confetti'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 |
8 | export function FlipButton({ text1, text2 }:{text1: string, text2: string}) {
9 | const [show, setShow] = useState(false)
Import traces:
Client Component Browser:
./components/ui/flip-button.tsx [Client Component Browser]
./app/page.tsx [Client Component Browser]
./app/page.tsx [Server Component]
Client Component SSR:
./components/ui/flip-button.tsx [Client Component SSR]
./app/page.tsx [Client Component SSR]
./app/page.tsx [Server Component]
https://nextjs.org/docs/messages/module-not-found
[2026-04-09T07:31:42.225Z] ⨯ ./components/ui/flip-button.tsx:6:1
Module not found: Can't resolve 'canvas-confetti'
4 | import { motion } from 'framer-motion'
5 | import { Check } from 'lucide-react'
> 6 | import confetti from 'canvas-confetti'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 |
8 | export function FlipButton({ text1, text2 }:{text1: string, text2: string}) {
9 | const [show, setShow] = useState(false)
Import traces:
Client Component Browser:
./components/ui/flip-button.tsx [Client Component Browser]
./app/page.tsx [Client Component Browser]
./app/page.tsx [Server Component]
Client Component SSR:
./components/ui/flip-button.tsx [Client Component SSR]
./app/page.tsx [Client Component SSR]
./app/page.tsx [Server Component]
https://nextjs.org/docs/messages/module-not-found
[2026-04-09T07:31:42.292Z] ./components/ui/flip-button.tsx:6:1
Module not found: Can't resolve 'canvas-confetti'
4 | import { motion } from 'framer-motion'
5 | import { Check } from 'lucide-react'
> 6 | import confetti from 'canvas-confetti'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 |
8 | export function FlipButton({ text1, text2 }:{text1: string, text2: string}) {
9 | const [show, setShow] = useState(false)
Import traces:
Client Component Browser:
./components/ui/flip-button.tsx [Client Component Browser]
./app/page.tsx [Client Component Browser]
./app/page.tsx [Server Component]
Client Component SSR:
./components/ui/flip-button.tsx [Client Component SSR]
./app/page.tsx [Client Component SSR]
./app/page.tsx [Server Component]
https://nextjs.org/docs/messages/module-not-found
[2026-04-09T07:31:45.908Z] Uncaught Error: ./components/ui/flip-button.tsx:6:1
Module not found: Can't resolve 'canvas-confetti'
4 | import { motion } from 'framer-motion'
5 | import { Check } from 'lucide-react'
> 6 | import confetti from 'canvas-confetti'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 |
8 | export function FlipButton({ text1, text2 }:{text1: string, text2: string}) {
9 | const [show, setShow] = useState(false)
Import traces:
Client Component Browser:
./components/ui/flip-button.tsx [Client Component Browser]
./app/page.tsx [Client Component Browser]
./app/page.tsx [Server Component]
Client Component SSR:
./components/ui/flip-button.tsx [Client Component SSR]
./app/page.tsx [Client Component SSR]
./app/page.tsx [Server Component]
https://nextjs.org/docs/messages/module-not-found
at <unknown> (Error: ./components/ui/flip-button.tsx:6:1)
at <unknown> (https://nextjs.org/docs/messages/module-not-found)
at <unknown> (Error: (./components/ui/flip-button.tsx:6:1)
at <unknown> (https://nextjs.org/docs/messages/module-not-found)
[2026-04-09T07:31:45.985Z] ./components/ui/flip-button.tsx:6:1
Module not found: Can't resolve 'canvas-confetti'
4 | import { motion } from 'framer-motion'
5 | import { Check } from 'lucide-react'
> 6 | import confetti from 'canvas-confetti'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 |
8 | export function FlipButton({ text1, text2 }:{text1: string, text2: string}) {
9 | const [show, setShow] = useState(false)
Import traces:
Client Component Browser:
./components/ui/flip-button.tsx [Client Component Browser]
./app/page.tsx [Client Component Browser]
./app/page.tsx [Server Component]
Client Component SSR:
./components/ui/flip-button.tsx [Client Component SSR]
./app/page.tsx [Client Component SSR]
./app/page.tsx [Server Component]
https://nextjs.org/docs/messages/module-not-found
Fix the code to resolve them.
Good news—canvas-confetti is already in package.json. The issue is that it needs to be installed. Let me check if there's a TypeScript types issue and add the types package:
Added the TypeScript types for canvas-confetti. The package was already listed as a dependency but wasn't fully installed with types. This should resolve the module resolution error and allow the confetti animation to work properly.
Done. Added a loading state that displays "Processing" with a spinning loader icon for 2 seconds after clicking Claim, then transitions to the Claimed state. Updated the confetti colors to silver (#C0C0C0), cool golden (#E8D5B7), and darker gold (#B8860B) for a more elegant aesthetic. The button is disabled during processing to prevent multiple clicks.
You can send messages while the preview loads