gaearon / gaearon/react-hot-loader

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

Open
#1,395 2 comments 5 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.2k
Forks
775
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.