如何找出哪個 package 正在使用 UNSAFE componentWillMount 方法？

Question

從昨天開始（我想）我已經開始從 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)

我知道這是怎么回事。 而且我沒有在我的代碼中使用這種生命周期方法。 實際上我只使用 React Hooks 並且我唯一的 class 組件是ErrorBoundary 。

該錯誤還記錄了這一點：

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

這是我的package.json文件

{
    "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"
    ]
}

問題

在過去的幾天里，我更新了一堆軟件包，刪除並安裝了一些新軟件包。 如何找出哪個 package 正在使用該方法？

Answer 1

如錯誤中所述，存在問題的組件是SideEffect 。 這個 function 提供了react-side-effect 。 查看您的 package.json 文件，我沒有看到它列為依賴項，因此它可能在您的 package-lock.json 文件中。 這意味着您安裝的 package 依賴於舊版本的react-side-effect 。

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

您可以通過手動安裝不使用 componentWillMount 的較新版本來解決此問題：

npm i react-side-effect@2.1.0

Answer 2

我最終解決這個問題的方式：

• 在 VSCode 上打開新的 window
• 打開文件夾node_modules
• Ctrl + Shift + F （打開搜索）
• 在node_modules文件夾和子文件夾中搜索componentWillMount

這是必要的，因為 VSCode 默認忽略node_modules文件夾。 您可以更改此設置，但我認為使用 VSCode 的新 window 並在其上打開node_modules會更容易。

Answer 3

您應該通過以下命令安裝react-helmet版本6 ：

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

或者

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

提示：警告問題來自react-helmet版本5與react-js版本16.10及更高版本的不兼容。

Answer 4

我遇到了同樣的問題，經過幾次搜索，我發現卸載“react-helmet” package 並將其替換為“react-helmet-async”修復了更新 react-helmet 時的錯誤沒有

npm i react-helmet-async