garbles / why-did-you-update

:boom: Puts your console on blast when React is making unnecessary updates.
4.97k stars 83 forks source link

React 15.6 crashes #45

Open justincorrigible opened 7 years ago

justincorrigible commented 7 years ago

Getting this error after updating to the newly released version. Anyone?

'lowPriorityWarning.js:40 Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you\'re not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class'
Uncaught TypeError: Cannot set property createClass of #<Object> which has only a getter
    at whyDidYouUpdate (index.js:41)
    at Object../components/stage.js (stage.js:10)
    at __webpack_require__ (bootstrap bb0dfdd…:659)
    at fn (bootstrap bb0dfdd…:85)
    at Object../app.js (app.js:1)
    at __webpack_require__ (bootstrap bb0dfdd…:659)
    at fn (bootstrap bb0dfdd…:85)
    at Object.0 (scaffolds.scss?f3be:26)
    at __webpack_require__ (bootstrap bb0dfdd…:659)
    at ../node_modules/ansi-html/index.js.module.exports (bootstrap bb0dfdd…:708)
mallocs commented 7 years ago

Yea. I fixed it for now by just adding a setter before React is passed to whyDidYouUpdate:

{
    let createClass = React.createClass;
    Object.defineProperty(React, 'createClass', {
      set: (nextCreateClass) => {
        createClass = nextCreateClass;
      }
    });
}
invegat commented 7 years ago

To disable the unused warning for createClass put this above / eslint-disable no-unused-vars /

kachkaev commented 7 years ago

My beginning of src/index.js in create-react-app after trying to remove warnings:

import React from 'react';

if (process.env.NODE_ENV !== 'production') {
  // eslint-disable-next-line no-unused-vars,react/no-deprecated
  let createClass = React.createClass;
  Object.defineProperty(React, 'createClass', {
    set: (nextCreateClass) => {
      createClass = nextCreateClass;
    },
  });
  // eslint-disable-next-line global-require
  const { whyDidYouUpdate } = require('why-did-you-update');
  whyDidYouUpdate(React);
}

/* eslint-disable import/first */
import ReactDOM from 'react-dom';
// ... other imports followed by the code

Still seeing

Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class
...
./src/index.js @ index.js:6

ping @garbles. I came across your project after scrolling through an article on medium – a bit sad to see such an awesome project not being udpated for a year :–)

captDaylight commented 7 years ago

@kachkaev Same, just came across this from the same article :) I would love to see this get some more love.

invegat commented 7 years ago

eslint-disable only works with this form of a comment / /, not this form //.

maicki commented 7 years ago

@kachkaev @captDaylight @invegat I did some work over here: https://github.com/maicki/why-did-you-update/tree/MSBugFixesAndImprovements . There are a bunch of fixes for React and React Native in there so not sure if it would worth it to create a new PR for it. cc @garbles

Noitidart commented 7 years ago

This is the screenshot of the error I am seeing:

My code that caused this error, I am using create-react-app:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import registerServiceWorker from './registerServiceWorker'

if (process.env.NODE_ENV !== 'production') {
    console.log('wrapping with whyDidYouUpdate');
    const { whyDidYouUpdate } = require('why-did-you-update');
    whyDidYouUpdate(React);
}

Following @mallocs suggestion and adding his block it works now, my code is now:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import registerServiceWorker from './registerServiceWorker'

if (process.env.NODE_ENV !== 'production') {
    let createClass = React.createClass;
    Object.defineProperty(React, 'createClass', {
      set: (nextCreateClass) => {
        createClass = nextCreateClass;
      }
    });
    console.log('wrapping with whyDidYouUpdate');
    const { whyDidYouUpdate } = require('why-did-you-update');
    whyDidYouUpdate(React);
}