Error: Super expression must either be null or a function

[mheisig]

I'm having the same issue someone else reported here: Stackoverflow

This is in a Next.js project and there are no problems when running in local development. This only happens when the production build is created so I'm not sure if something in the minification process is causing the problem?

Downgrading to 4.0.1 appears to resolve the issue.

Dependencies:

    "react": "^16.9.0",
    "react-confetti": "4.0.1",
    "react-dom": "^16.10.2",

[florianmartens]

Same issue here. Thank you for opening up the issue.

[alampros]

Thanks for reporting this issue! I'll take a look at it tomorrow.

[cjmyles]

@alampros any luck with this?

[svechinsky]

The same issue with me, the downgrading solution worked.

[cjmyles]

@svechinsky Can you paste your code - I'm struggling to determine what props are allowed on that version of Confetti. Ideally the latest version would work in production.

[svechinsky]

Here is what I had

<Confetti numberOfPieces={333} recycle={false} />

At least as of 6 days ago this didn't work in production with the latest version but did work locally. Downgrading fixed the production issue.

[cjmyles]

@svechinsky I'm using Typescript so it files on compilation, as apparently I need a canvasRef property.

I fixed this as follows:

import React, { useRef } from "react";

const App: React.FC = () => {
    const canvasRef = useRef(null);

    return (
            <Confetti numberOfPieces={1000} recycle={false} canvasRef={canvasRef} />
    );
}

[cjmyles]

@alampros Would be amazing if you could fix the issue with the latest version in production.

[stolinski]

I'm also hitting this same error in production. 0.5.1. Downgraded to 0.4.1 fixe the issue.

[yesitsfebreeze]

I'm also hitting this same error in production. 0.5.1. Downgraded to 0.4.1 fixe the issue.

correction: 5.0.1. Downgraded to 4.0.1

[roelvan]

Same here, downgrading to 4.0.1 does the trick for now.

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[Mesoptier]

This is still an issue for me. I'm trying to figure out a fix. Some notes:

• The issue only occurs if I do a Webpack build of my application with --mode=production and the devtool option disabled. It does not occur if I run with --mode=development or with devtool option enabled (possibly only if set to an "*-eval" value).
• The issue does not occur when I explicitly import the unminified version. That is import Confetti from 'react-confetti/dist/react-confetti'; instead of import Confetti from 'react-confetti'; so it seems to me there is something awry with the minification step.

[Mesoptier]

I have cloned this project's repository and ran the build myself. Now I have the react-confetti.min.js (red in diff) that was installed before using yarn add react-confetti in my application and the react-confetti.min.js (green in diff) that I just built. I ran prettier on both files to get a cleaner diff. I then diffed the files and got the following result:

@@ -892,14 +892,6 @@
                         if (Array.isArray(t)) return t;
                     })(t) ||
                     (function(t, e) {
-                        if (
-                            !(
-                                Symbol.iterator in Object(t) ||
-                                '[object Arguments]' ===
-                                    Object.prototype.toString.call(t)
-                            )
-                        )
-                            return;
                         var n = [],
                             r = !0,
                             i = !1,
@@ -1025,7 +1017,7 @@
                                 },
                             })),
                                 e && D(t, e);
-                        })(e, t),
+                        })(e, o['Component']),
                         (n = e),
                         (r = [
                             {
@@ -1091,7 +1083,7 @@
                         i && I(n, i),
                         e
                     );
-                })(o.Component);
+                })();
             function A(t) {
                 var e = {},
                     n = {},

As you can see there is some funny business going on with passing o.Component to some function. This is what causes the Super expression... error, since the function is being passed undefined instead of the Component constructor.

When I include the minified script that I just built instead of the one that is installed I no longer get the error, so it appears this is indeed the root cause.

[Mesoptier]

@alampros It seems that something has gone wrong in the build process when the 5.0.1 version was published to npm. When I run the build command in the react-confetti repository on my machine it produces a different minified script than the one that is provided when installing the package.

Perhaps a solution is to simply try publishing the package again? Making sure that the correct minified file is generated.

---

Workaround In case anyone simply wants a quick workaround. You can import the unminified dist file instead of the minified (and apparently corrupted) file.

- import Confetti from 'react-confetti';
+ import Confetti from 'react-confetti/dist/react-confetti';

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[Mesoptier]

Yeah, this is still relevant!

@alampros Could you look into what I posted above?

[rkuykendall]

@alampros Are you even here or do we need to fork this?

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[rkuykendall]

Good point stale bot. Forked the project here, overhauled the build/publication process and actively accepting PRs:

https://github.com/rkuykendall/confetti-react

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.