如何找出哪个包正在使用 UNSAFE componentWillMount 方法？
How to find out which package is using the UNSAFE componentWillMount method?
从昨天开始（我想）我开始收到来自 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 @ 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 @ 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 @ 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"
]
}
问题
在过去的几天里，我更新了很多包，删除并安装了一些新包。
我如何找出哪个包正在使用该方法？
我最终解决这个问题的方式：
- 在 VSCode
上打开新的 window
- 打开文件夹
node_modules
- Ctrl + Shift + F（打开搜索）
- 在
node_modules 文件夹和子文件夹中搜索了 componentWillMount
这是必要的，因为 VSCode 默认情况下会忽略 node_modules 文件夹。您可以更改此设置，但我认为使用 VSCode 的新 window 并在其上打开 node_modules 更容易。
如错误中所述，有问题的组件是 SideEffect。此功能由 react-side-effect 提供。查看您的 package.json 文件，我没有看到它被列为依赖项，因此它可能在您的 package-lock.json 文件中。这意味着您安装的软件包依赖于 react-side-effect 的旧版本。
$ grep -i effect package-lock.json
"react-side-effect": "^1.1.0"
您可以通过手动安装不使用 componentWillMount 的较新版本来解决此问题：
npm i react-side-effect@2.1.0
您应该通过以下命令安装 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及更高版本。
我遇到了同样的问题，经过几次搜索，我发现卸载 'react-helmet' package and replacing it for 'react-helmet-async' 修复了错误，而更新 react-helmet 则没有
npm i react-helmet-async
从昨天开始（我想）我开始收到来自 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 @ 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 @ 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 @ 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"
]
}
问题
在过去的几天里，我更新了很多包，删除并安装了一些新包。 我如何找出哪个包正在使用该方法？
我最终解决这个问题的方式：
- 在 VSCode 上打开新的 window
- 打开文件夹
node_modules - Ctrl + Shift + F（打开搜索）
- 在
node_modules文件夹和子文件夹中搜索了componentWillMount
这是必要的，因为 VSCode 默认情况下会忽略 node_modules 文件夹。您可以更改此设置，但我认为使用 VSCode 的新 window 并在其上打开 node_modules 更容易。
如错误中所述，有问题的组件是 SideEffect。此功能由 react-side-effect 提供。查看您的 package.json 文件，我没有看到它被列为依赖项，因此它可能在您的 package-lock.json 文件中。这意味着您安装的软件包依赖于 react-side-effect 的旧版本。
$ grep -i effect package-lock.json
"react-side-effect": "^1.1.0"
您可以通过手动安装不使用 componentWillMount 的较新版本来解决此问题：
npm i react-side-effect@2.1.0
您应该通过以下命令安装 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及更高版本。
我遇到了同样的问题，经过几次搜索，我发现卸载 'react-helmet' package and replacing it for 'react-helmet-async' 修复了错误，而更新 react-helmet 则没有
npm i react-helmet-async