v4.3.1: Super expression must either be null or a function #472

xiaodi0003 · 2020-04-13T14:52:25Z

when use v4.3.1, console error: Super expression must either be null or a functio...
v4.2.0 is ok

STRML · 2020-04-13T15:32:07Z

Do you have a stacktrace? I am not seeing this error.

saladNights · 2020-04-13T16:23:14Z

I'm using react-draggable with react-resizable. This is what I have in console

Uncaught TypeError: Super expression must either be null or a function
at react-draggable.min.js:537
at react-draggable.min.js:536
at Module.<anonymous> (react-draggable.min.js:535)
at n (react-draggable.min.js:15)
at Object.e.exports (react-draggable.min.js:88)
at n (react-draggable.min.js:15)
at e.exports (react-draggable.min.js:51)
at Object.<anonymous> (react-draggable.min.js:5)
at f ((index):1)
at Object.<anonymous> (Resizable.js:10)

Jordan-Eckowitz · 2020-04-13T16:52:01Z

@STRML, I am getting the same error in my production build:

dan7554 · 2020-04-13T18:09:33Z

Same error with react-grid-layout ~0.18.3

dan7554 · 2020-04-13T19:08:00Z

Determined it was a build server caching issues with us.

STRML · 2020-04-13T23:30:47Z

Can you get an example of this happening in codesandbox or debug further? I cannot replicate this.

STRML · 2020-04-17T16:27:04Z

By chance, are any of you using terser? terser/terser#308

mattogren · 2020-04-18T00:25:11Z

We're experiencing this issue and we're using terser:
terser@^4.1.2
terser-webpack-plugin "^1.4.1"

We've pinned to 4.2.0 for now...

dennisvankekem · 2020-04-18T21:07:38Z

same issue, but not using terser at our side.

Zwieks · 2020-04-18T22:11:02Z

Same issue here:
"react-grid-layout": "^0.18.3",
"react-draggable": "^4.2.0",
"react-resizable": "^1.10.1",
Not using Terser
Blocking a production build..

jelafi · 2020-04-18T22:42:01Z

Same issue here.

I forked:
"react-grid-layout": "0.16.9"
containing in the package.json:
"react-draggable": "3.x"
"react-resizable":"1.x"
what leads to the lock of react-draggable in version 3.3.2 and 4.3.1

I then use this fork into a package built with webpack.
The final application is using this package and builds correctly but I have the exact same error in the browser console at application startup.

Everything is working fine if I pin 4.2.0 or use npm start for the final application.

krotsky · 2020-04-20T08:34:03Z

Same issue here:
"react-grid-layout": "^0.18.3",
"react-draggable": "^4.2.0",
"react-resizable": "^1.10.1",
Not using Terser
Blocking a production build..

I've changed "react-draggable" to "4.2.0" (without ^), it works

SmithaHS · 2020-04-23T19:57:36Z

Facing the same issue suddenly. Works fine in Dev env but fails on Prod. Any rootcause? because there was no change in package.json done and no change in code as well.

saladNights · 2020-04-24T05:40:20Z

Facing the same issue suddenly. Works fine in Dev env but fails on Prod. Any rootcause? because there was no change in package.json done and no change in code as well.

Check your package.json. If you have "react-draggable": "*" or "^4.2.0", you will have a new broken version automatically when running npm install.

Specify explicitly the working version like "react-draggable": "4.2.0"

SmithaHS · 2020-04-24T06:26:37Z

Facing the same issue suddenly. Works fine in Dev env but fails on Prod. Any rootcause? because there was no change in package.json done and no change in code as well.

Check your package.json. If you have "react-draggable": "*" or "^4.2.0", you will have a new broken version automatically when running npm install.

Specify explicitly the working version like "react-draggable": "4.2.0"

Yes, added it explicitly and it works fine with that. Wanted to root cause it. Have not mentioned react-draggable separately in package.json.

nelsondude · 2020-04-29T15:45:35Z

Same issue here. Using terser and uglify - i think it can be fixed by setting f_names=true in terser config but this feels like a hack

Chnapy · 2020-04-30T14:54:04Z

Same here, since an upgrade from 3.x to 4.3.1.

Rollback to 4.2.0 resolved the issue.

nelsondude · 2020-04-30T15:17:18Z

Any chance we can do a patch that rolls back 4.3.1 version until root cause is found?

dan7554 · 2020-04-30T18:02:04Z

If you are using an old version, try upgrading to the latest version.

…

On Thu, Apr 30, 2020, 9:17 AM Alexander Nelson ***@***.***> wrote: Any chance we can do a patch that rolls back 4.3.1 version until root cause is found? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#472 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACNBYXOBRC5D2AHD2IBZI5TRPGJBBANCNFSM4MHAFGDQ> .

STRML · 2020-04-30T18:56:05Z

The issue is, there were zero packaging changes made between these versions. I don't know what we need to rollback. If someone could *please* get a reproduction working (I have not been able to), then I can bisect and push a patch fast.

BoazKG93 · 2020-04-30T19:20:46Z

I'm also experiencing this problem now. The weird thing is that on localhost it all works good, but once i deploy to Firebase or AWS Amplify, I get this problem. You can see it here:
https://treedis-app.web.app/login

BoazKG93 · 2020-04-30T19:23:35Z

Determined it was a build server caching issues with us.

So did you solve the issue? I'm also experiencing this problem only on my build server, while on localhost it's fine.

STRML · 2020-04-30T19:51:56Z

Thanks for that, any chance you can reproduce it locally too?

That minified file is very oddly formatted, my inspector can barely keep up with the execution path, and running it through a niceifier (like jsnice) completely changes the ordering of the file. It looks like Terser is getting a little too clever for its own good.

BoazKG93 · 2020-04-30T20:12:38Z

I'll try to reproduce, although i don't have terser on my local install. so it will need some configurations. For now I also reverted to 4.2.0 which seems to work (a different link, i'll keep this broken link alive so you can use it for debugging)

anoopfrancis09 · 2020-05-04T07:12:36Z

Is there any fix for it?
Even after setting the version to 4.2.0 didn't work for me.
Just changing the version in package.json works? or do I need to do anything else?

My production build is blocked due to this issue.

arielhernandezmusa · 2020-05-08T22:55:27Z

Hi there, same issue here

STRML · 2020-05-11T17:26:18Z

Hi. We still need a reproduction for this issue if we are going to fix it.

nelsondude · 2020-05-11T19:14:41Z

Looking at facebook/create-react-app#7236 (comment) , It looks like the library author is minifying their code, which I think contributes to the issue (really, this shouldn't be needed as the client's Webpack config does it).

I'm not sure what the exact issue is but it sounds like if we set webpack mode to "none" and remove the optimization config then it should solve the problem. He makes a good point that the client will be minimizing anyways so this is unnecessary to include. Thoughts on this?

nelsondude · 2020-05-11T19:15:22Z

@STRML this probably relates to your comment earlier referencing terser/terser#308

There is nothing special in the browser build that is actually practical for modern use. The "browser" field, as defined in https://github.com/defunctzombie/package-browser-field-spec#overview, indicates that you should use it if you are directly accessing globals, using browser-specific features, dom manipulation, etc. React components like react-draggable are built to do minimal raw DOM manipulation, and to always gate this behind conditionals to ensure that server-side rendering still works. We don't make any changes to any of that for the "browser" build, so it's entirely redundant. Hoping this also fixes the "Super expression must either be null or a function" error (#472) that some users have experienced with particular bundler configurations. The browser build may still be imported at "build/web/react-draggable.min.js". This is to prevent breakage only. The file is no longer minified to prevent possible [terser bugs](terser/terser#308).

STRML · 2020-05-12T20:07:14Z

I've published v4.4.0, everyone who is having this problem, please give it a shot?

alxkhr · 2020-05-12T20:38:36Z

Seems fixed. We encountered the problem, when using react-rnd (which uses react-draggable) and I can confirm that your new version is working for us.

Further information: As @nelsondude mentioned, the terser-webpack-plugin, that will be integrated as a build step, when running webpack in production mode had an issue and we could solve it by upgrading terser to the latest version... But your fix works even with the broken terser version.

@STRML If you are still trying to reproduce the issue, I could help you.

STRML · 2020-05-12T21:29:59Z

This is fixed in 4.4.1.

Thanks all for your patience with me, I had a hare-brained idea to modernize the builds I was shipping to support umd, cjs, and modules - an exercise in futility to handle well, with the costs far outweighing the benefits. Most of that work is deleted in 4.4.1, and the only exposed build is ES5-compliant, unminified, CJS source.

han-so1omon · 2023-05-10T21:04:41Z

This appears to still be an issue. Using next 13.4.1, React 18.2.0, react-grid-layout 18.2.0, react-draggable ^4.4.1

Simple app with one page file that looks as follows:

import React from 'react';
import { WidthProvider, Responsive } from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';

const ResponsiveGridLayout = WidthProvider(Responsive);

const initialLayout = [
  { i: 'a', x: 0, y: 0, w: 1, h: 2 },
  { i: 'b', x: 1, y: 0, w: 3, h: 2 },
  { i: 'c', x: 4, y: 0, w: 1, h: 2 }
];

const TanGridElement = (props) => (
  <div
    style={{
      backgroundColor: 'tan',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      overflow: 'hidden',
    }}
    {...props}
  >
    {props.children}
  </div>
);

const MyComponent = () => {
  return (<div></div>);
  /*
  return (
    <ResponsiveGridLayout
      className="layout"
      layouts={{ lg: initialLayout }}
      rowHeight={30}
      breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
      cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
      isDraggable={true}
      isResizable={true}
    >
      <TanGridElement key="a">A</TanGridElement>
      <TanGridElement key="b">B</TanGridElement>
      <TanGridElement key="c">C</TanGridElement>
    </ResponsiveGridLayout>
  );
  */
};

export default MyComponent;

This yields:

- error node_modules/react-draggable/build/cjs/DraggableCore.js (48:112) @ _inherits
- error Error [TypeError]: Super expression must either be null or a function
    at _inherits (webpack-internal:///(sc_server)/./node_modules/react-draggable/build/cjs/DraggableCore.js:137:15)
    at eval (webpack-internal:///(sc_server)/./node_modules/react-draggable/build/cjs/DraggableCore.js:263:5)
    at eval (webpack-internal:///(sc_server)/./node_modules/react-draggable/build/cjs/DraggableCore.js:473:2)
    at (sc_server)/./node_modules/react-draggable/build/cjs/DraggableCore.js (/Users/Shared/p/test/.next/server/app/page.js:2273:1)
    at __webpack_require__ (/Users/Shared/p/test/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/react-draggable/build/cjs/Draggable.js:27:45)
    at (sc_server)/./node_modules/react-draggable/build/cjs/Draggable.js (/Users/Shared/p/test/.next/server/app/page.js:2262:1)
    at __webpack_require__ (/Users/Shared/p/test/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/react-draggable/build/cjs/cjs.js:2:16)
    at (sc_server)/./node_modules/react-draggable/build/cjs/cjs.js (/Users/Shared/p/test/.next/server/app/page.js:2284:1) {
  digest: undefined

LukePetko · 2023-05-13T22:01:20Z

For me "use client" solved the issue

BoxedFruits · 2023-09-25T02:06:42Z

For me "use client" solved the issue

Thank you so much for this! It was not working with Nextjs13 for me until adding this line. Which kind of sucks since I really wanted my project to be SSR

lianqin7 mentioned this issue Apr 14, 2020

feat: hotfix react-draggable@4.3.1 to 4.2.0 cnpm/bug-versions#86

Merged

STRML mentioned this issue Apr 17, 2020

Bug. Uncaught TypeError: Super Expression must either be null or a function react-grid-layout/react-resizable#128

Open

STRML changed the title ~~when use v4.3.1, console error: Super expression must either be null or a functio~~ v4.3.1: Super expression must either be null or a function May 11, 2020

STRML mentioned this issue May 12, 2020

react-draggable not working after build #476

Closed

STRML closed this as completed May 12, 2020

srallen mentioned this issue Jun 12, 2020

Reusable movable modal zooniverse/front-end-monorepo#1674

Merged

18 tasks

BoxedFruits mentioned this issue Sep 25, 2023

React 18 Support Needed react-grid-layout/react-grid-layout#1829

Open

v4.3.1: Super expression must either be null or a function #472

v4.3.1: Super expression must either be null or a function #472

Comments

xiaodi0003 commented Apr 13, 2020

STRML commented Apr 13, 2020

saladNights commented Apr 13, 2020 • edited

Jordan-Eckowitz commented Apr 13, 2020

dan7554 commented Apr 13, 2020 • edited

dan7554 commented Apr 13, 2020 • edited

STRML commented Apr 13, 2020

STRML commented Apr 17, 2020

mattogren commented Apr 18, 2020

dennisvankekem commented Apr 18, 2020

Zwieks commented Apr 18, 2020 • edited

jelafi commented Apr 18, 2020 • edited

krotsky commented Apr 20, 2020

SmithaHS commented Apr 23, 2020

saladNights commented Apr 24, 2020 • edited

SmithaHS commented Apr 24, 2020

nelsondude commented Apr 29, 2020

Chnapy commented Apr 30, 2020 • edited

nelsondude commented Apr 30, 2020

dan7554 commented Apr 30, 2020 via email

STRML commented Apr 30, 2020 via email • edited

BoazKG93 commented Apr 30, 2020

BoazKG93 commented Apr 30, 2020

STRML commented Apr 30, 2020

BoazKG93 commented Apr 30, 2020

anoopfrancis09 commented May 4, 2020 • edited

arielhernandezmusa commented May 8, 2020

STRML commented May 11, 2020

nelsondude commented May 11, 2020 • edited

nelsondude commented May 11, 2020

STRML commented May 12, 2020

alxkhr commented May 12, 2020 • edited

STRML commented May 12, 2020

han-so1omon commented May 10, 2023 • edited

LukePetko commented May 13, 2023

BoxedFruits commented Sep 25, 2023

saladNights commented Apr 13, 2020 •

edited

dan7554 commented Apr 13, 2020 •

edited

dan7554 commented Apr 13, 2020 •

edited

Zwieks commented Apr 18, 2020 •

edited

jelafi commented Apr 18, 2020 •

edited

saladNights commented Apr 24, 2020 •

edited

Chnapy commented Apr 30, 2020 •

edited

STRML commented Apr 30, 2020 via email •

edited

anoopfrancis09 commented May 4, 2020 •

edited

nelsondude commented May 11, 2020 •

edited

alxkhr commented May 12, 2020 •

edited

han-so1omon commented May 10, 2023 •

edited