React warning: componentWillMount has been renamed, and is not recommended for use.

[cbdeveloper]

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

I've started to get this warning message from React.

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

I don't use this method componentWillMount on my code. I don't know exactly since when I'm getting this message. I've updated (React included), installed and removed some packages over the last few days.

I've asked about it on SO, but sill no answer.
https://stackoverflow.com/questions/58891130/how-to-find-out-which-package-is-using-the-unsafe-componentwillmount-method?noredirect=1#comment104047811_58891130

Obs: The full error message is on the SO question.

I opened a new VSCode window and opened my node_modules folder to search inside of its files and found this:

react-lifecycles-compat.js

function componentWillMount() {
    // Call this.constructor.gDSFP to support sub-classes.
    var state = this.constructor.getDerivedStateFromProps(this.props, this.state);
    if (state !== null && state !== undefined) {
      this.setState(state);
    }
  }

Also this is in my package-lock.json

"react-hot-loader": {
            "version": "4.12.17",
            "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.12.17.tgz",
            "integrity": "sha512-nee5q4Xip6+wD8DrCWxVUH0zT488K1zRG1KezJTb8oEbRO1JZvnEizbOG7BwnRfxxjk5QSyx6fPXeBf2fToBhw==",
            "dev": true,
            "requires": {
                "fast-levenshtein": "^2.0.6",
                "global": "^4.3.0",
                "hoist-non-react-statics": "^3.3.0",
                "loader-utils": "^1.1.0",
                "prop-types": "^15.6.1",
                "react-lifecycles-compat": "^3.0.4",   // < ------------------------------
                "shallowequal": "^1.1.0",
                "source-map": "^0.7.3"
            },

QUESTION

Could this warning be related to this library that react-hot-loader requires?

Expected behavior

This warning shouldn't be happening.

Actual behavior

The warning.

Environment

React Hot Loader version:

package.json

"devDependencies": {
        "@babel/cli": "^7.7.0",
        "@babel/core": "^7.7.2",
        "@babel/node": "^7.7.0",
        "@babel/preset-env": "^7.7.1",
        "@babel/preset-react": "^7.7.0",
        "babel-eslint": "^10.0.3",
        "babel-loader": "^8.0.6",
        "babel-plugin-module-resolver": "^3.2.0",
        "babel-plugin-styled-components": "^1.10.6",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^3.2.0",
        "dotenv-webpack": "^1.6.0",
        "eslint": "^6.6.0",
        "eslint-import-resolver-alias": "^1.1.2",
        "eslint-module-utils": "^2.4.1",
        "eslint-plugin-import": "^2.18.2",
        "eslint-plugin-react": "^7.16.0",
        "eslint-plugin-react-hooks": "^2.2.0",
        "file-loader": "^4.2.0",
        "firebase-admin": "^8.7.0",
        "html-webpack-plugin": "^3.2.0",
        "react-hot-loader": "^4.12.17",
        "rimraf": "^3.0.0",
        "style-loader": "^1.0.0",
        "url-loader": "^2.2.0",
        "webpack": "^4.41.2",
        "webpack-bundle-analyzer": "^3.6.0",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.9.0",
        "webpack-manifest-plugin": "^2.2.0",
        "webpack-merge": "^4.2.2"
    },
    "dependencies": {
        "@babel/polyfill": "^7.7.0",
        "@hot-loader/react-dom": "^16.11.0",
        "animejs": "^3.1.0",
        "firebase": "^7.3.0",
        "fuse.js": "^3.4.5",
        "md5": "^2.2.1",
        "prop-types": "^15.7.2",
        "query-string": "^6.8.3",
        "react": "^16.11.0",
        "react-dom": "^16.11.0",
        "react-helmet": "^5.2.1",
        "react-router-dom": "^5.1.2",
        "react-transition-group": "^4.3.0",
        "styled-components": "^4.4.1"
    },

Run these commands in the project folder and fill in their results:

1. node -v: 10.16.2
2. npm -v: 6.9.0

Then, specify:

1. Operating system: Windows 10
2. Browser and version: Chrome v78

Reproducible Demo

Please take the time to create a new project that reproduces the issue.

You can copy your project that experiences the problem and start removing things until you’re left with the minimal reproducible demo. This helps contributors, and you might get to the root of your problem during that process.

Push to GitHub and paste the link here.

[theKashey]

Almost forgot about it, and yet, that could be it.

[pilniczek]

Same issue for me...