项目中react-scripts初始版本是3.4.1，好多年了一直没有人升级。
现在react官方的create-react-app版本已经到了5.x，而且官方都不怎么维护，开始在官方推荐nextjs之类的其他脚手架。
因为版本过低，eslint，和typescript之类的配套都用得不是很舒服。。。而且编译之类的也很慢。。。
迁移到vite,rspack之类的代价太大了，我准备先升级cra到最新版本看看。
升级的版本就是按照官方的changelog文件，跟着他的版本升级。
https://github.com/facebook/create-react-app/blob/main/CHANGELOG-3.x.md
之前也尝试过直接安装5.0，但是报错太多，直接放弃了。
跟着版本升级相对比较容易。。。
下面主要记录发生报错，需要其他调整的版本
4.0.0
这个版本升级了eslint相关，然后cacro报错了。
需要我们把cacro版本升级
yarn add --exact @craco/craco@6.0.0 -D
另外还有一个启动时的报错
noFallthroughCasesInSwitch
这个我们搜索changelog发现，在4.0.1就修复了，所以我们直接升级4.0.1
4.0.1
yarn add --exact react-scripts@4.0.1
升级到4.0.1我们发现，官方启动的时候，直接改了你的tsconfig配置 noFallthroughCasesInSwitch配置为true
还有图片地址变成 [object Module]
似乎是webpack的file loader 默认行为变了，需要配置
因为4.x版本，我发现总共只有3个版本，干脆直接升到4.0,3
4.0.3
控制台报错提示你安装一个插件,所以执行一下安装就行了
yarn add @babel/plugin-proposal-private-property-in-object -D
我们查看cacro更新文档可以发现，7.0版本开始都没有什么破坏性改动，所以直接升到6.4.3
yarn add --exact @craco/craco@6.4.3 -D
typescript 干脆直接升级到4.x的最新版，虽然这个版本的cra似乎只支持到4.5左右，但是但是问题不大。
yarn add --exact typescript@4.9.5 -D
这里出现一个问题，ts原来的版本是3.9，升到4.x后，出现一个报错，就是scss 和png图片文件开始找不到了module了
这个问题之前也碰到过，就是在d.ts声明文件里声明一下就好了。(其实不用配置，因为react-scripts的声明文件里面帮你配好了)
结果发现还是报错。
最后我发现是tsconfig配置的问题，有一个inculde选项，一般只要配你需要ts检查的目录就行了，一般只放一个src
但是我发现，我的"src/**/*.ts",也就是说只检查ts文件，难怪报找不到module的错误。。。
可能3.x的版本是不检查scss ，png这些资源的。。。
接下来把图片路径导入改一下，建议都改成import导入
或者在require的后面加一个.default
可以用vscode对require(搜索，基本上能找到图片require引入的地方了
升到4.0.3，我们就可以先提交代码，可以先停一停，观察一段时间。。。
5.0.1
直接升级到最新的5.0.1，因为我发现，除了最初的breaking change，后面基本是修修补补。。。
yarn add --exact react-scripts@5.0.1 -D
craco 也升级到最新的7.1.0
yarn add @craco/craco@7.1.0 -D
craco start开局就报错了
我猜测是craco的一些插件不兼容了，所以我把webpack配置，插件都注释掉，可以成功启动。
之后出现webpack5的 78个error
先把eslint和ts check关了，不然错误太多，影响我们查看webpack的报错
craco弃用插件移除
比如HardSourceWebpackPlugin,
这个插件可以移除了，因为不支持webpack5，而且webpack5已经自带cache功能了
然后我们把以前的webpack配置注释掉，然后再慢慢加。。。。
babel/runtime
首先第一个问题是有很多 babel/runtime相关的报错，而且报错的地方不在我们的项目里，而是在node_modules里面。
比如antd的目录里面就有好几个报错。
似乎是因为，webpack5，不在内置babel的一些polyfill，所以我们需要自己安装
执行下面的代码安装最新版本的即可，现在是7.22.5版本
yarn add -D @babel/runtime
这个安装完以后瞬间错误就少了很多。
node ployfill
webpack5也移除了node 模块的ployfill，以后我们用到的需要自己安装了，
基本上node ployfill项目中也很少用到，我这边看到的报错，大部分还是node_modules里看到的。
这个现象可以说webpack越来越极端了，和vite就是两个方向的产品，webpack的配置是越来越麻烦。。。
安装下面几个node模块,就是报错里面提到的模块。
"path": "^0.12.7",
"process": "^0.11.10",
"stream": "^0.0.2",
"util": "^0.12.5"
"buffer": "^6.0.3"
这些都安装了，之后就剩两三个报错了。
全路径问题 fully specific
webpack5 对路径的要求也更严格，需要是全路径。。。 比如 import lll/index,要改成ll/index.js
这个我们可以在cacro里面关掉
configure: {
// webpack 5 引入js 必须完全声明路径，这个配置是排除这个报错
module: {
rules: [
{
test: /\.m?js/,
resolve: { fullySpecified: false },
},
],
},
},
},
svg namespace
这个报错是antd的Avatar上，加入svg图标报错。
似乎是webpack5 对svg格式要求更严格导致的。
网上搜到的解决方案是让你手动把svg里面的命名改成驼峰命名
或者用一个svg转jsx的网站。
手动改svg太麻烦，放弃。svg转jsx，试了发现转不了，也许是svg里面有中文的原因？
最后我用一个命令行工具解决了
npm i -g svgo
执行命令转化一下，会把svg进行压缩，去掉没用的部分
svgo -i input.svg -o out.svg
process is not defined
process是node的模块里唯一用到的，因为用了环境变量，来区分生产环境，测试环境。。。。
之前那些
很多其他模块，都是node_modules里面的包报错，所以我们安装那些模块只是为了让webpack知道怎么找那些包。
process因为用到了，所以我们要让webpack知道。。。
const webpack = require('webpack')
webpack: {
plugins: {
add: [
new webpack.ProvidePlugin({
process: 'process/browser.js',
}),
new webpack.ProvidePlugin({
//...
Buffer: ['buffer', 'Buffer'],
}),
],
},
图片 require
记得4.x版本，require图片编程object module， 但是没想到5.0.1版本又改回来了。。
所以我们重新改回去，有问题的地方。
也就是说，不需要加.default了。
解决完上面的问题，项目已经可以正常运行了
ts报错
我们把ts检查打开，找到报错的地方解决就好了。
注意点
5.x版本已经移除了12以下版本的支持，所以现在要用更新版本的node了。
webpack5 官方也有迁移指南，https://webpack.docschina.org/migrate/5/，如果还有别的问题，可以看看这个官方文档。
网友评论