why-did-you-render: class constructors must be invoked with |new|

Trying to implement base functionality on our existing React app.

Getting

class constructors must be invoked with |new|

for any component I add the static property to.

It looks like this is a common issue across this library and the predecessors, but I was under the impression this library had it solved, so I must be missing something.

I’ve attached the library via NPM as well as manually adding the src to see if I could narrow it down. Best I can tell the error is thrown here (line 505): _this = _possibleConstructorReturn(this, _getPrototypeOf(WDYRPatchedClassComponent).call(this, props, context));

Excluding markup, my component looks like this: `class Home extends React.Component {

constructor(props) { super(props); } static whyDidYouRender = true; render(){ … } export default Home; `

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 29

Links to this issue

How to deal with class extension in libraries?

Commits related to this issue

version 5 updates: * make logOwnerReasons true by default. * only trackHooks if they are supported. * removed building without .babel-plugin-transform-classes because babel fixed it in their newer ver... — committed to welldone-software/why-did-you-render by vzaidman 4 years ago
version 5 updates: * make logOwnerReasons true by default. * only trackHooks if they are supported. * removed building without .babel-plugin-transform-classes because babel fixed it in their newer ver... — committed to welldone-software/why-did-you-render by vzaidman 4 years ago

Most upvoted comments

Same error here using the create-react-app 3 and this import:

const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js').

My browserlist:

  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Maybe you should re-open this issue.

frederikhors on Apr 26, 2019

fixed in v2.5.0.

If you are not transpiling your classes, the library should be built without class transpilations as well.

So we added 3 endpoints where it is indeed not transpiled:

  "main-no-classes-transpile": "dist/no-classes-transpile/cjs/whyDidYouRender.min.js",
  "module-no-classes-transpile": "dist/no-classes-transpile/esm/whyDidYouRender.min.js",
  "browser-no-classes-transpile": "dist/no-classes-transpile/umd/whyDidYouRender.min.js",

to use it, import the library like this:

const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js');

vzaidman on Jan 19, 2019

I decided to close this issue since I understand very well why it happens and that it is solved already: https://github.com/welldone-software/why-did-you-render/issues/5#issuecomment-467900253

If anybody has new information and / or able to reproduce it here: https://codesandbox.io/s/welldone-softwarewhy-did-you-render-with-reactredux-fc8es

I’ll obviously re-open it.

vzaidman on Sep 9, 2019

again:

The library extends all react class components.
Transpiled to es5 class cannot extend a native class currently until babel/babel#8656 is merged.
If you transpile your classes, use:

const whyDidYouRender = require('@welldone-software/why-did-you-render);

If you DO use native es6 classes, use:

const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js');

another way to fix it is to enable @babel/plugin-transform-classes in @babel/preset-env like this:

presets: [
      ['@babel/preset-env', {
        //...
        include: [
          // remove when `https://github.com/babel/babel/issues/7022` is solved
          '@babel/plugin-transform-classes'
        ]
      }],
      '@babel/preset-react',
      //.....
    ],
//.....

vzaidman on Sep 9, 2019