解决React项目中jest-worker依赖不兼容的问题
博主最近负责一个新项目的上线，Web端使用React+ts进行开发，在本地使用webpack打包一切正常，但是一到线上就会构建失败，前端开发一开始以为是Nodejs的版本问题，各种切换版本、配置环境变量后问题依然存在。眼看着离上线日期越来越近，后来博主只好抽出时间、赶鸭子上架，帮忙排查问题。
还原现场
- 项目配置
- react版本
17.0.20 - react-script版本
5.0.0 - typescript版本
^4.4.2
- 错误现场
通过react-app-rewired build构建项目，报如下错误：
node_modules/terser-webpack-plugin/node_modules/jest-worker/build/WorkerPool.js:25
[exec] } catch {
[exec] ^
[exec]
[exec] SyntaxError: Unexpected token {
[exec] at createScript (vm.js:80:10)
[exec] at Object.runInThisContext (vm.js:139:10)
[exec] at Module._compile (module.js:599:28)
[exec] at Object.Module._extensions..js (module.js:646:10)
[exec] at Module.load (module.js:554:32)
[exec] at tryModuleLoad (module.js:497:12)
[exec] at Function.Module._load (module.js:489:3)
[exec] at Module.require (module.js:579:17)
[exec] at require (internal/module.js:11:18)
[exec] at Object.<anonymous> (/srv/nbs/0/source/abos-decorate-web-dev/node_modules/terser-webpack-plugin/node_modules/jest-worker/build/index.js:38:42)
[exec] npm ERR! code ELIFECYCLE
可以看到jest-worker包中的WorkerPool.js第25行存在语法错误，也就是try...catch(e){}被写成了try...catch{}，导致无法正常构建。
解决方案
- 摸索
使用npm list jest-worker查看jest-worker的依赖情况，可以看到是由react-scripts引入的，而且有多个版本的jest-worker，所以解决的突破点在react-scripts上。
└─┬ [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └─┬ @jest/[email protected]
│ ├─┬ @jest/[email protected]
│ │ └── [email protected] deduped
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
└─┬ [email protected]
└─┬ [email protected]
└── [email protected]
由于博主不是专业的前端开发，残存的Nodejs知识还是5、6年前的，对Nodejs和npm的机制不是很清楚，所以以为直接增加一个jest-worker依赖，把版本改成最新的28.0.0-alpha.7就可以了，结果我还是太天真的，npm根本就不吃我这套!——依然报同样的错误。
- 尝试
然后就只能求助google了，在stackoverflow竟然也有一个跟博主十分相似的提问，链接：webpack – how solve error jest-worker at run build? – Stack Overflow
下面有人给出了答案，并且获得了认可：
what's the version of Node.js are you using? I ran into the same error when I was running the latest terser-webpack-plugin @ 3.0.2. According to the release log, there were some breaking changes introduced in 3.0.0 and one of them was "minimum supported Node.js version is 10.13" It worked when I downgraded terser-webpack-plugin to 2.3.6. So you'll probably have to upgrade your Node.js if you're using a version earlier than 10.13, or downgrade your terser-webpack-plugin.求助翻译：
您使用的是什么版本的 Node.js？ 我在运行最新的 terser-webpack-plugin @ 3.0.2 时遇到了同样的错误。根据发布日志，在 3.0.0 中引入了一些重大更改，其中之一是“最低支持的 Node.js 版本为 10.13” 当我将 terser-webpack-plugin 降级到 2.3.6 时，它起作用了。 因此，如果您使用的是 10.13 之前的版本，您可能必须升级您的 Node.js，或者降级您的 terser-webpack-plugin。好家伙，一语惊醒梦中人！既然可以确定Nodejs的版本没问题，那就是跟webpack有关咯。。。回到博主的问题，既然跟webpack有关系，那就是与用于构建项目的
react-scripts或typescrip包有关喽！ - 进击
好家伙，项目用的
react-scripts已经是最新的5.0.0版本了，那就尝试降低版本试试，总之经过多次尝试，最终将依赖的版本定格在下面的组合上，问题成功解决！"react-scripts": "3.4.4", "typescript": "^4.6.2", "@typescript-eslint/eslint-plugin": "2.18.0"
写在最后
博主承认自己对前端非常外行，但是还是想问候下jest-worker的作者，你有什么毛病吗，好好的try...catch(e){}不写，你非要搞出个特殊形式，你图啥！