How to find out which package is using the UNSAFE componentWillMount method?

Question

Since yesterday (I think) I've started to get this Warning from React:

Warning: componentWillMount has been renamed, and is not recommended for use. 
See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. 
In React 17.x, only the UNSAFE_ name will work. 
To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` 
in your project source folder.

Please update the following components: SideEffect(NullComponent)

I know what this is about. And I don't use this lifecycle method in my code. Actually I'm working only with React Hooks and my only class component is an ErrorBoundary.

The error also logs this:

Please update the following components: SideEffect(NullComponent)

r @ backend.js:6
printWarning @ react-dom.development.js:12339
lowPriorityWarningWithoutStack @ react-dom.development.js:12360
push.fxOa.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:12524
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:25646
commitRootImpl @ react-dom.development.js:24894
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12131
commitRoot @ react-dom.development.js:24888
finishSyncRender @ react-dom.development.js:24295
performSyncWorkOnRoot @ react-dom.development.js:24273
(anonymous) @ react-dom.development.js:12181
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12131
flushSyncCallbackQueueImpl @ react-dom.development.js:12176
flushSyncCallbackQueue @ react-dom.development.js:12164
scheduleUpdateOnFiber @ react-dom.development.js:23675
dispatchAction @ react-dom.development.js:17056
getAllBlog$ @ App.js:142
tryCatch @ runtime.js:45
invoke @ runtime.js:271
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:145
Promise.then (async)
invoke @ runtime.js:144
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype.<computed> @ runtime.js:97
push.ls82.exports.async @ runtime.js:216
getAllBlog @ App.js:123
(anonymous) @ App.js:152
commitHookEffectList @ react-dom.development.js:21996
commitPassiveHookEffects @ react-dom.development.js:22030
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:441
flushPassiveEffectsImpl @ react-dom.development.js:25349
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12131
flushPassiveEffects @ react-dom.development.js:25318
(anonymous) @ react-dom.development.js:25197
workLoop @ scheduler.development.js:762
flushWork @ scheduler.development.js:717
performWorkUntilDeadline @ scheduler.development.js:219

This is my package.json file

{
    "name": "my-project",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
        "watch": "webpack --watch",
        "start": "webpack-dev-server --open --config webpack.dev.js",
        "build": "set NODE_ENV=production&& webpack --config webpack.prod.js",
        "build-dev": "webpack --config webpack.devBuild.js",
        "share": "ngrok http 8080 -host-header=\"localhost:8080\"",
        "build-functions-index": "set NODE_ENV=functions&& babel functions/indexES6.js --out-file functions/index.js",
        "build-functions-distFunctions": "rimraf functions/distFunctions && set NODE_ENV=functions&& babel functions/src --out-dir functions/distFunctions --copy-files",
        "build-functions-distApp": "rimraf functions/distApp && set NODE_ENV=functions&& babel src --out-dir functions/distApp --copy-files"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "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"
    },
    "sideEffects": [
        "*.css"
    ]
}

QUESTION

I've updated a bunch of packages, removed and installed some new ones over the last few days. How can I find out which package is using that method?

Answer 1

I had the same problem and after a few searches, I found that uninstalling 'react-helmet' package and replacing it for 'react-helmet-async' fixed the error while updating react-helmet didn't

npm i react-helmet-async

Answer 2

The component with the issue is SideEffect as noted in the error. This function is provided with react-side-effect. Looking at your package.json file, I don't see it listed as a dependency, therefore it's probably inside your package-lock.json file. This implies that a package you have installed has this as a dependency on an older version of react-side-effect.

$ grep -i effect package-lock.json 
        "react-side-effect": "^1.1.0"

You may resolve this by manually installing a newer version that doesn't use componentWillMount:

npm i [email protected]

Answer 3

You should just install react-helmet version 6 by the following command:

npm install --save react-helmet@^6.0.0-beta.2

Or

yarn add react-helmet@^6.0.0-beta.2

Hint: The warning issue comes from the incompatibility of react-helmet version 5 with react-js version 16.10 and later.

Answer 4

The way I've end up solving this:

• Open new window on VSCode
• Open folder node_modules
• Ctrl + Shift + F (opens search)
• Searched for componentWillMount on the node_modules folder and subfolders

This was necessary because VSCode ignores the node_modules folder by default. You can change this setting, but I think it's easier to use a new window of VSCode and open the node_modules on it.