maicki/why-did-you-update

incompatible at least with react 16.7.0-alpha.0

a-x- opened this issue · 15 comments

a-x- commented 
TypeError: Class constructor DocheckStatPage cannot be invoked without 'new'

  var WDYUClassComponent = function (_ctor) {
    _inherits(WDYUClassComponent, _ctor);

    function WDYUClassComponent() {
      _classCallCheck(this, WDYUClassComponent);

      return _possibleConstructorReturn(this, _ctor.apply(this, arguments)); // <<< HERE
    }
a-x- commented

"@babel/core": "7.0.0-beta.39",

vzaidman commented

i think ill get to it when this version will move to beta.
everybody are welcome to contribute before that.

what do you mean by

"@babel/core": "7.0.0-beta.39"

?

a-x- commented

I thought that Babel version might be helpful too

a-x- commented

But latest stable Babel releases behave like so

vzaidman commented

ok. i strongly suggest to update babel to the latest 7 version anyway :)

knoid commented

I'm getting the same error with React 16.3.1 and babel-core 6.26.3. What else could this be related to?

danburzo commented

Sounds like it's because you're not transpiling your class components with Babel for the development environment (fair) and nwb is not transpiling class inheritance correctly class WDYUClassComponent extends YourComponent { }.

danburzo commented

So the idea here (and in #48) is that Babel-transpiled class inheritance cannot work when the base class is not transpiled itself.

A quick solution that I can suggest is to also publish the src/ folder on NPM and let people import:

import WDYU from 'why-did-you-update/src';

@vzaidman what do you think?

knoid commented

already did, same problem (but only on the enabled components)

vzaidman commented

fixed this on my more advanced project on version 2.2.3

"@welldone-software/why-did-you-render": "^2.2.3",
check the sandbox:
https://codesandbox.io/s/44qrzy7v0?expanddevtools=1

i would welcome a PR on this project that fixes the same issue.

you can look here to understand how:
https://github.com/welldone-software/why-did-you-render/blob/master/src/whyDidYouRender.js
(line 10)

matthew-dean commented

I discovered that if I use:

const reactRoot = ReactDOM.unstable_createRoot(document.getElementById('root'))

reactRoot.render((
  <ReduxProvider store={configureStore(initialState)}>
    <Authentication>
      <App />
    </Authentication>
  </ReduxProvider>))

I get logging as if my App is rendering, and it doesn't trigger the cannot be invoked without 'new' error but it never mounts! (DOM is empty.)

vzaidman commented

I found out the problem is caused by transpiled class trying to extend native class.
It happens when you build your app with the target of latest browsers.
Targeting latest browsers cause babel-env to not transpile classes.
The library always transpiles classes.
Transpiled classes are failing to extend untranspiled classes.

Fixed this in the why-did-you-render library:
welldone-software/why-did-you-render#5

  • 🎉3
maicki commented

Closing this Issue. For further details please look at: #63