博主最近负责一个新项目的上线,Web端使用React+ts进行开发,在本地使用webpack打包一切正常,但是一到线上就会构建失败,前端开发一开始以为是Nodejs的版本问题,各种切换版本、配置环境变量后问题依然存在。眼看着离上线日期越来越近,后来博主只好抽出时间、赶鸭子上架,帮忙排查问题。
还原现场
1、项目配置
- react版本17.0.20
- react-script版本5.0.0
- typescript版本^4.4.2
2、错误现场
通过react-app-rewired build构建项目,报如下错误:
可以看到jest-worker包中的WorkerPool.js第25行存在语法错误,也就是try...catch(e){}被写成了try...catch{},导致无法正常构建。
解决方案
1、摸索
使用npm list jest-worker查看jest-worker的依赖情况,可以看到是由react-scripts引入的,而且有多个版本的jest-worker,所以解决的突破点在react-scripts上。
由于博主不是专业的前端开发,残存的Nodejs知识还是5、6年前的,对Nodejs和npm的机制不是很清楚,所以以为直接增加一个jest-worker依赖,把版本改成最新的28.0.0-alpha.7就可以了,结果我还是太天真的,npm根本就不吃我这套!——依然报同样的错误。
2、尝试
然后就只能求助google了,在stackoverflow竟然也有一个跟博主十分相似的提问,链接:webpack - how solve error jest-worker at run build? - Stack Overflow
下面有人给出了答案,并且获得了认可:
求助翻译:
好家伙,一语惊醒梦中人!既然可以确定Nodejs的版本没问题,那就是跟webpack有关咯。。。回到博主的问题,既然跟webpack有关系,那就是与用于构建项目的react-scripts或typescrip包有关喽!
3、进击
好家伙,项目用的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){}
不写,你非要搞出个特殊形式,你图啥!

文章评论