React-modal: Warning about the component

[arcifius]

Steps to reproduce:

Just include the lib and add it to render method... You should see:
Warning: Unsafe legacy lifecycles will not be called for components using new component APIs.

Modal uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:
componentWillReceiveProps
componentWillUpdate

The above lifecycles should be removed.

[diasbruno]

Hi @arcifius, don't know if this warning should be present. We are in a process of adapting the library for react 16.3+ and 17.

cc @Hypnosphi, if you can comment on this.

[Hypnosphi]

@arcifius Which react-modal and react versions is it?

[LeonardoGentile]

I'm experiencing the same issue:
[email protected]
[email protected]

[Hypnosphi]

Weird, I can't reproduce it (console is empty):
https://codesandbox.io/s/m5xo3xz96j

[akonyer]

I am able to reproduce this warning as well.

React 16.3.2 and react-modal 3.4.2

[diasbruno]

Can you try to downgrade react to 16.3.0 or 16.3.1?

[Hypnosphi]

@arcifius @LeonardoGentile @akonyer
Can some of you please create a GitHub repo with minimal reproduction of the issue?

[ignatiusreza]

I'm having this issue when using react-modal together with react-hot-loader.. need to dig deeper, but, I think the issue is caused by react-hot-loader depending on v2 of react-lifecycles-compat, while react-modal depends on v3..

The issue went away if I provide custom yarn resolutions like

"resolutions": {
  "react-lifecycles-compat": "^3.0.2"
}

[ignatiusreza]

react-hot-loader updated their dependencies and the warning no longer there, even without custom yarn resolutions mentioned above..

[larabr]

I get similar errors as well by wrapping the [email protected] with React.StrictMode component (From [email protected]):

main.bundle.js:200868 Warning: Unsafe lifecycle methods were found within a strict-mode tree:
componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: Modal, ModalPortal

componentWillUpdate: Please update the following components to use componentDidUpdate instead: Modal

[am-you]

_Using react 16.3.1 getting similar issue_