Attempted import error: 'canvas-confetti' does not contain a default export (imported as 'confetti'). in nextjs

[Md-Anamul-Haque]

Attempted import error: 'canvas-confetti' does not contain a default export (imported as 'confetti'). in nextjs

import confetti from "canvas-confetti";

//---------  ** ---------

      confetti({
                  particleCount: 100,
                  spread: 70,
                  origin: { y: 0.6 }
              });

[catdad]

Hmm... I know other people are successfully using this module in their nextjs project. Are you fully describing the problem you are having?

[Yousuf-H]

I was having the same issue when using this in my rails app. I managed to fix it by doing import "canvas-confetti";

for example:

import "canvas-confetti";

//--------- ** ---------

confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 }
});

Hopefully that helps.

[catdad]

Just to make sure there isn't anything I don't understand, I just created a new app using npx create-next-app. Then I created the following component:

"use client";
import confetti from "canvas-confetti";

export const ConfettiButton = () => {
    return <button onClick={() => {
        confetti();
    }}>click for confetti</button>
};

Then I used this button without an issue, never receiving an error.

I don't doubt that y'all are having an issue, but the repro steps seem non-obvious. Please describe how I can reproduce the issue. Providing a minimal repro app is usually the best way to make sure an issue gets looked at.

[GP-95]

I was having the same issue when using this in my rails app. I managed to fix it by doing import "canvas-confetti";

for example:

import "canvas-confetti";

//--------- ** ---------

confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });

Hopefully that helps.

When using Typescript then make sure 'allowUmdGlobalAccess' is enabled in tsconfig.

[Md-Anamul-Haque]

you can export the default confetti form canvas-confetti.

[richardoey]

I was having the same issue when using this in my rails app. I managed to fix it by doing import "canvas-confetti";
for example:
import "canvas-confetti";
//--------- ** ---------
confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
Hopefully that helps.

When using Typescript then make sure 'allowUmdGlobalAccess' is enabled in tsconfig.

I'm using NextJS v14.1.0 and Typescript. I solve it by doing npm i --save-dev @types/canvas-confetti

[Md-Anamul-Haque]

Just to make sure there isn't anything I don't understand, I just created a new app using npx create-next-app. Then I created the following component:

"use client";
import confetti from "canvas-confetti";

export const ConfettiButton = () => {
    return <button onClick={() => {
        confetti();
    }}>click for confetti</button>
};

Then I used this button without an issue, never receiving an error.

I don't doubt that y'all are having an issue, but the repro steps seem non-obvious. Please describe how I can reproduce the issue. Providing a minimal repro app is usually the best way to make sure an issue gets looked at.

try to build then you must see
Attempted import error: 'canvas-confetti' does not contain a default export (imported as 'confetti').

[ulitcos]

@Md-Anamul-Haque, try using the react version - https://github.com/ulitcos/react-canvas-confetti

[catdad]

@Md-Anamul-Haque I don't understand what you mean by "try to build then you must see". I did build it. It worked fine. Builds without error, the web page shows a button and clicking that button launches confetti.

Do you have an application that you have built that you can show here to help with debugging?

[Md-Anamul-Haque]

you use now typescript + nodejs
and build
then you see this morning

[AdamPro13]

I'm running into this issue after upgrading my app from Next.js 14.0.4 to 14.1+. I've been able to reproduce this with Next.js 14.1.1 and 14.2.3.

If I create a new sample Next.js app using Next.js version 14.2.3 (the latest), my confetti component with the exact same code as my real app is able to render in this sample app. I also tried moving my confetti component to be a child of my real application's root, (trying to isolate it from something strange that could be happening upstream in the tree) but that also doesn't work.

I'm pretty stumped as to why I'm able to use this component at the root of my demo app but not my real app.

'use client'

import { useEffect } from 'react'
import confetti from 'canvas-confetti'

const Confetti = () => {
    useEffect(() => {
        // Confetti trigger logic goes here
        const triggerConfetti = () => {
            const durationMs = 5 * 1000
            const animationEnd = Date.now() + durationMs
            const defaults = {
                startVelocity: 40,
                spread: 360,
                ticks: 85,
                zIndex: 0,
            }

            function randomInRange(min: number, max: number) {
                return Math.random() * (max - min) + min
            }

            const interval: ReturnType<typeof setInterval> = setInterval(
                function () {
                    const timeLeft = animationEnd - Date.now()

                    if (timeLeft <= 0) {
                        return clearInterval(interval)
                    }

                    var particleCount = 50 * (timeLeft / durationMs)
                    confetti(
                        Object.assign({}, defaults, {
                            particleCount,
                            origin: {
                                x: randomInRange(0.1, 0.9),
                                y: Math.random() - 0.2,
                            },
                            scalar: 2,
                        })
                    )
                },
                250
            )
        }

        triggerConfetti()
    }, [])

    return null
}

export default Confetti