react15升级17问题记录

,当前旧项目主要依赖版本介绍：这里只贴出重要依赖包的旧版本做展示，可以看到版本都相当落后了，升级的话会涉及一些API以及依赖的修改或者弃用
次文章只记录当前项目使用，其他项目不一定通用

{
	"react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-draft-wysiwyg": "^1.10.0",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.6.0",
    "redux-actions": "^2.0.3",
    "react-dev-utils": "^3.1.0",
    "react-error-overlay": "^1.0.10",
    "babel": "^6.23.0",
    "babel-cli": "^6.24.1",
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "^20.0.3",
    "babel-loader": "7.1.1",
    "babel-plugin-import": "^1.1.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-app": "^3.0.2",
    "babel-preset-stage-2": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "css-loader": "0.28.4",
    "file-loader": "0.11.2",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.6",
    "style-loader": "0.18.2",
    "url-loader": "0.5.9",
    "eslint": "4.4.1",
    "eslint-config-react-app": "^2.0.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.35.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.1.0",
    "webpack": "3.5.1",
    "webpack-dev-server": "2.7.1",
    "webpack-manifest-plugin": "1.2.1",
    "html-webpack-plugin": "2.29.0",
    "sw-precache-webpack-plugin": "0.11.4",
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

升级之后版本：升级之后还多出来了一些依赖包，替换了一些依赖包，比如：mini-css-extract-plugin

{
	"react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.9",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4",
    "redux": "^4.2.1",
    "redux-actions": "^2.6.5",
    "react-dev-utils": "^6.1.1",
    "react-error-overlay": "^1.0.10",
    "@babel/cli": "^7.24.1",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime-corejs2": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^23.4.2",
    "babel-loader": "^8.0.0",
    "babel-plugin-import": "^1.1.1",
    "babel-preset-react-app": "^10.0.1",
    "css-loader": "^4.3.0",
    "postcss-loader": "^3.0.0",
    "file-loader": "^6.2.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "eslint": "^6.8.0",
    "eslint-config-react-app": "^5.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-flowtype": "^4.7.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^2.5.1",
    "webpack": "^4.47.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3",
    "webpack-manifest-plugin": "^4.1.1",
    "sw-precache-webpack-plugin": "^1.0.0",
    "html-webpack-plugin": "^4.5.2",
    "mini-css-extract-plugin": "^1.6.2",
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

升级步骤及遇到的问题：

1. 安装17版本的react、react-dom （npm i react@17 react-dom@17）
2. 安装5版本的react-router、react-router-dom
3. 升级babel:输入命令行npx babel-upgrade --write会自动升级到babel7的版本，这也是为什么会多出来一些babel包的原因
4. 升级到webpack4版本
5. 升级eslint相关的插件到最新版本

以上升级先在控制台执行命令改变package.json文件，然后删除node_modules包，删除.lock文件，执行npm的缓存清除命令，然后重新npm install，其中清npm缓存命令如下：
npm cache clean --force
这个命令将会清除npm缓存目录中的所有数据。请注意，–force 参数是必须的，因为从npm v5开始，运行无参数的npm cache clean不再允许删除所有缓存。
npm cache verify
如果你使用的是npm的较新版本（v5及以上），你可以使用这个命令，这个命令会校验并清理无效或损坏的缓存条目。它不会删除所有缓存，但它确实会清理并且优化缓存。

react低版本代码里面会有一些生命周期在高版本里面已经不建议使用了，比如：componentWillMount，componentWillReceiveProps 以及componentWillUpdate ，但是为了兼容高版本要给这些生命周期加上 UNSAFE_ 前缀。

npm i之后，运行项目，会报错，大体分成几类：
一、 Cannot find module…；找不到包
这种解决方法就是：缺什么装什么

二、依赖之间版本不对等问题
解决方法：控制台会提示当前依赖关联的那些依赖需要的版本，对应升级即可
但是会产生很多不太好解决的问题，比如：依赖之间形成依赖闭环，A->B->C->D->A，这种需要先理清楚依赖之间的关系，然后从package.json中手动删除这些依赖，重新逐个升级

三、webpack的编译问题
分成几种：
1. 插件丢弃，这就需要自己逐个查找了，看插件在新版本中是否还在使用（官方文档会有说明）
在开发配置和生产配置中找到对应丢弃的插件进行删除，那之前对应插件的功能就没有了怎么办？不用担心，随着版本的升级，这些丢弃的功能大多已被集成到新版本中了
2. 插件替换，官方同样会说明需要用什么新插件替换，如何使用
3. 插件配置变更：有的插件还在使用但是配置上略作调整

以下是几个典型的问题：

问题：Module build failed: Error: .plugins[1][1] must be an object, false, or undefined
options: {
plugins: [
// “transform-decorators-legacy”,
// [‘import’, [{ libraryName: ‘antd’, style: true }]],
[“@babel/plugin-proposal-decorators”, { “legacy”: true }], // 插件替换
[‘import’, { libraryName: ‘antd’, style: true }], // 插件配置做变更
],
cacheDirectory: true,
},

问题：Plugin could not be registered at ‘html-webpack-plugin-before-html-processing’. Hook was not found.
升级html-webpack-plugin到4 // 插件版本升级

问题：this.htmlWebpackPlugin.getHooks is not a function
插件：new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),// 插件配置做变更

问题：与eslint相关的插件报错
升级与eslint相关的插件匹配webpack4 // 插件版本升级

问题：Error: Failed to load plugin ‘react-hooks’ declared in ‘package.json » eslint-config-react-app’: Cannot find module ‘eslint-plugin-react-hooks’
安装eslint-plugin-react-hooks@2 // 安装缺失插件

问题：页面不报错，也没有任何输出，这个问题是因为之前的配置里面同时使用了html-webpack-plugin和InterpolateHtmlPlugin，前面已经将这两个插件进行结合使用，以为不需要html-webpack-plugin插件了，就将new HtmlWebpackPlugin() 注释掉了，但是就没有输出了
检查html-webpack-plugin的使用

插件去除（生产环境）：DefinePlugin、UglifyJsPlugin
插件去除（开发环境）：NamedModulesPlugin