React-grid-layout: Uncaught TypeError: Super expression must either be null or a function

[igor9silva]

Just leaving it here as a reference for someone else.

The following error started happening on my web app a couple hours ago:

Uncaught TypeError: Super expression must either be null or a function

The only hint was pointing to https://github.com/STRML/react-draggable.

What happened is that [email protected] depends on react-draggable@^4.0.0, which deployed v4.3.1 ~6 hours ago.

I'm not sure if [email protected] is broken or not backward-compatible.

My solution was to add into my package.json:

"resolutions": {
    "react-grid-layout/**/react-draggable": "4.2.0"
},

That way yarn (as per https://classic.yarnpkg.com/en/docs/selective-version-resolutions) could do the dirty work for me.

There is also npm-shrinkwrap which might be helpful if you're not using yarn.

I'd recommend updating the depency from ^4.0.0 (minor) to 4.2.x (patch, and in a more readable form).

[immanuelfodor]

Feeling the same heat :(

[immanuelfodor]

It was all good until yesterday where our Verdaccio npm proxy cached a new version, so we're trying now to implement your resolution fix, maybe it helps us, too:

[immanuelfodor]

For npm, we made the following changes, now it works again:

package-lock.json

-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.3.1.tgz",
-      "integrity": "sha512-m8QeV+eIi7LhD5mXoLqDzLbokc6Ncwa0T34fF6uJzWSs4vc4fdZI/XGqHYoEn91T8S6qO+BSXslONh7Jz9VPQQ==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.2.0.tgz",
+      "integrity": "sha512-5wFq//gEoeTYprnd4ze8GrFc+Rbnx+9RkOMR3vk4EbWxj02U6L6T3yrlKeiw4X5CtjD2ma2+b3WujghcXNRzkw==",

package.json

+    "react-draggable": "4.2.0",

[manikumarrepuri]

Just leaving it here as a reference for someone else.

The following error started happening on my web app a couple hours ago:

Uncaught TypeError: Super expression must either be null or a function

The only hint was pointing to https://github.com/STRML/react-draggable.

What happened is that [email protected] depends on react-draggable@^4.0.0, which deployed v4.3.1 ~6 hours ago.

I'm not sure if [email protected] is broken or not backward-compatible.

My solution was to add into my package.json:

"resolutions": {
    "react-grid-layout/**/react-draggable": "4.2.0"
},

That way yarn (as per https://classic.yarnpkg.com/en/docs/selective-version-resolutions) could do the dirty work for me.

There is also npm-shrinkwrap which might be helpful if you're not using yarn.

I'd recommend updating the depency from ^4.0.0 (minor) to 4.2.x (patch, and in a more readable form).

Thanks for the possible resolution trick for this issue @igor9silva . I have tried with your suggestion, it worked perfectly when I run it locally the imitate of production, which is with yarn install. But this didn't work with Docker production build, note: my Docker file using RUN cd /tmp/npm && npm install. If use yarn install instead of npm install...it's failing.
Could you please throw some light what am I doing wrong here.

[igor9silva]

@manikumarrepuri
If yarn install + yarn build is working on your machine, it should work on docker build. i.e. your problem is another one.

Look for dependencies cache on your build node/machine.

If your production build is built using CI, you should take care of your lock files (NPM, yarn, and so on).

[manikumarrepuri]

Thank you @igor9silva . Finally, I got it worked.

[sanphandinh]

I use create react app and recently I had the same error. I edited package.json as @igor9silva but it didn't work.

    "swr": "^0.1.18",
    "tabex": "^1.1.0",
    "wallet-address-validator": "^0.2.4",
    "worker-loader": "^2.0.0",
    "yup": "^0.27.0"
  },
  "resolutions": {
    "react-grid-layout/**/react-draggable": "4.2.0"
  },

I use yarn install and yarn build.

react-dom.production.min.js:5058 TypeError: Super expression must either be null or a function

[igor9silva]

@sanphandinh
Your dependency on react-draggable probably isn’t inherited by react-grid-layout (do you actually depend on it? Is it on your package.json “dependency”?).

Use npm list to see your dependency tree, and find out why your app is installing [email protected], then adapt “resolutions” accordingly.

[sanphandinh]

Thanks @igor9silva, I fixed it. @storybook/ui used react-draggable, so it caused a build error. I update package.json with resolutions:

"resolutions": {
    "react-grid-layout/**/react-draggable": "4.2.0",
    "@storybook/**/react-draggable": "4.2.0"
  }

[nelsondude]

Had to fix this dep as well - bit more difficult with pnpm. Can we block react-draggable 4.3.x in this repo until react-draggable is fixed?

[igor9silva]

@nelsondude I'm not sure that 4.3.x is actually broken.

As per @solo474 well said in #1199, it's most likely due to optimisations done in build time.

[STRML]

I'd really like to know what this is. Can anybody reliably reproduce it in an example app?

[igor9silva]

Can't do it right now, but bootstrapping a clean CRA and adding [email protected] as a dep might do the job.

[nelsondude]

I can try to set up an example app today with CRA

[nelsondude]

I wasnt able to reproduce, setup app with CRA. Installed latest grid layout version and @igor9silva version that you mentioned. Copied over rgl implementation basic from examples folder. Created prod build and everything looking good

[dan7554]

If you all have not upgraded to the newest version of terser, I recommend trying.

[MarkyDeParky]

For what it's worth: I'm facing this exact error message in my setup right now. My situation is as follows:

• I'm building a 'web part' using the SharePoint Framework (SPFx). This web part is to be used in a SharePoint site, which is part of Office 365.
• The issue only appears when I do a production build, it works fine in a debug build.
• SharePoint currently uses react and react-dom versions 16.8.5.
• The issue appears when SharePoint tries to requirejs-load my web part's js bundle.

It's pretty hard to pinpoint what's causing the issue since the resulting bundle js file is about 1.7MB's of minified JS. It does seem to happen in the draggable part of the solution. Chrome's debugger puts the error around the middle of this piece of code:

               var V = {
                    start: "touchstart",
                    move: "touchmove",
                    stop: "touchend"
                }
                  , K = {
                    start: "mousedown",
                    move: "mousemove",
                    stop: "mouseup"
                }
                  , q = K
                  , X = function(e) {
                    !function(e, t) {
                        throw new TypeError("Super expression must either be null or a function")
                    }();
                    var t, n, r, i = (t = a,
                    function() {
                        var e, n = z(t);
                        if (function() {
                            if ("undefined" == typeof Reflect || !Reflect.construct)
                                return !1;
                            if (Reflect.construct.sham)
                                return !1;
                            if ("function" == typeof Proxy)
                                return !0;
                            try {
                                return Date.prototype.toString.call(Reflect.construct(Date, [], function() {})),
                                !0
                            } catch (e) {
                                return !1
                            }
                        }()) {
                            var r = z(this).constructor;
                            e = Reflect.construct(n, arguments, r)
                        } else
                            e = n.apply(this, arguments);
                        return function(e, t) {
                            return !t || "object" !== j(t) && "function" != typeof t ? H(e) : t
                        }(this, e)
                    }
                    );

Not sure if it's helpful.

I'm using npm. Not sure if I'm able to force the react-draggable to use version 4.2.0 instead of 4.3.1 which it's currently using:

└─┬ [email protected]
  ├── [email protected]
  └─┬ [email protected]
    └── [email protected]  deduped

I'll try to force version 4.2.0, but a more robust solution would of course be more helpful.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days