解决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){}
不写,你非要搞出个特殊形式,你图啥!