Unsafe legacy lifecycles error

[felipe-pereira]

I'm getting this error when loading the page (no need to show the bar):

_Warning: Unsafe legacy lifecycles will not be called for components using new component APIs.

Connect(LoadingBar) uses getDerivedStateFromProps() but also contains the following legacy lifecycles:
componentWillReceiveProps
componentWillUpdate

The above lifecycles should be removed. Learn more about this warning here:
https://fb.me/react-async-component-lifecycle-hooks_

I added the code just as in the examples:

App.jsx --> simple import
Reducer --> same as in "Install the reducer to the store"
showLoading/hideLoading --> as in "Usage without middleware"

React version: "react": "^16.4.0"

Any ideas?

[mironov]

@felipe-pereira Please ensure that you are using the latest versions of react-redux-loading-bar and react-redux. Related issue: #63

[felipe-pereira]

Still have the issue after updating:

from package-lock.json

"react": {
"version": "16.4.1",
"resolved": "https://registry.npmjs.org/react/-/react-16.4.1.tgz",

"react-redux": {
"version": "5.0.7",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",

"react-redux-loading-bar": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/react-redux-loading-bar/-/react-redux-loading-bar-4.0.5.tgz",

I'm using material-ui 1.3.1 and one of their themes/kits (just mentioning in case it helps), also using ssr so no very sure on how to move that setup to codepen to reproduce it.

[dayrlism10]

same issue im having, with the same version too

[James-Dev]

Hi,

Same here, I'm facing the same issue with @felipe-pereira.

Below are my package dependencies:
"react": "^16.4.1",
"react-redux": "^5.0.7",
"react-redux-loading-bar": "^4.0.5",

my full package.json can be found here: https://pastebin.com/V7ngu1xL

Kindly, advice/ guide us on how to solve this issue? Thanks

[EdoAPP]

Hi,

Did anyone find the solution to this? I'm facing the same problem.

Dependencies:
"react": "16.3.0", "react-redux": "5.0.5", "react-redux-loading-bar": "^4.0.5",

[felipe-pereira]

in my case this wasn't a must so I just stashed the changes and will try again in some time, if one of you can repro this in a codepen that could help the author fix it

[EdoAPP]

@felipe-pereira, the error seems to be for react-lifecycles-compat dependency. Looking at the library I could find this:

if (typeof prototype.componentWillMount === 'function') {
      foundWillMountName = 'componentWillMount';
    } else if (typeof prototype.UNSAFE_componentWillMount === 'function') {
      foundWillMountName = 'UNSAFE_componentWillMount';
    }
    if (typeof prototype.componentWillReceiveProps === 'function') {
      foundWillReceivePropsName = 'componentWillReceiveProps';
    } else if (typeof prototype.UNSAFE_componentWillReceiveProps === 'function') {
      foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
    }
    if (typeof prototype.componentWillUpdate === 'function') {
      foundWillUpdateName = 'componentWillUpdate';
    } else if (typeof prototype.UNSAFE_componentWillUpdate === 'function') {
      foundWillUpdateName = 'UNSAFE_componentWillUpdate';
    }

if (
      foundWillMountName !== null ||
      foundWillReceivePropsName !== null ||
      foundWillUpdateName !== null
    ) {
      var componentName = Component.displayName || Component.name;
      var newApiName =
        typeof Component.getDerivedStateFromProps === 'function'
          ? 'getDerivedStateFromProps()'
          : 'getSnapshotBeforeUpdate()';
throw Error(
        'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
          componentName +
          ' uses ' +
          newApiName +
          ' but also contains the following legacy lifecycles:' +
          (foundWillMountName !== null ? '\n  ' + foundWillMountName : '') +
          (foundWillReceivePropsName !== null
            ? '\n  ' + foundWillReceivePropsName
            : '') +
          (foundWillUpdateName !== null ? '\n  ' + foundWillUpdateName : '') +
          '\n\nThe above lifecycles should be removed. Learn more about this warning here:\n' +
          'https://fb.me/react-async-component-lifecycle-hooks'
      );

So basically what this means is that the polifyll won't work if your actual version already contains the new component lifecycle API. In that case, we would only need to use the polyfill if it react version doesn't contains the components new API

[felipe-pereira]

@EdoAPP oh ok, so is there a flag to use the polyfill or not that one could use?