如何找出哪个 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