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

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 grid-layout@v0.17.1 depends on react-draggable@^4.0.0, which deployed v4.3.1 ~6 hours ago.

I’m not sure if react-draggable@4.3.1 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).

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 10
  • Comments: 18

Most upvoted comments

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"
  }

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

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",

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:

image

Feeling the same heat 😦

image