解决React项目中jest-worker依赖不兼容的问题

胡萝虎 

 

博主最近负责一个新项目的上线,Web端使用React+ts进行开发,在本地使用webpack打包一切正常,但是一到线上就会构建失败,前端开发一开始以为是Nodejs的版本问题,各种切换版本、配置环境变量后问题依然存在。眼看着离上线日期越来越近,后来博主只好抽出时间、赶鸭子上架,帮忙排查问题。

 

还原现场

  1. 项目配置
  • react版本17.0.20
  • react-script版本5.0.0
  • typescript版本^4.4.2
  1. 错误现场

通过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{},导致无法正常构建。

 

解决方案

  1. 摸索

使用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根本就不吃我这套!——依然报同样的错误。

 

  1. 尝试

    然后就只能求助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-scriptstypescrip包有关喽!

  2. 进击

    好家伙,项目用的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){}不写,你非要搞出个特殊形式,你图啥!

Recommended Posts

Jellyfin中使用QSV替代VAAPI转码

使用过Jellyfin的应该都会遇到转码的问题,默认情况下都是使用VAAPI进行转码,这种方式兼容性比较好,但是转码的性能比较一般。如果使用的是Intel平台J4125及更早的CPU的话,建议切换为QSV(Intel Quick Sync )进行转码,效率会比VAAPI快很多,并且CPU也会更低。

胡萝虎 

在群晖上使用Docker部署为知笔记服务

虽然市面上有很多各种类型的云笔记应用,像有道云笔记、印象、OneNote,包括Notion,博主都曾尝试使用过。但是随着资料越来越多,特别是一些涉及个人隐私的资料放在云端笔记上,比如密码、账号之类的,让博主越来越感到焦虑😂。博主此前也曾在群晖部署过蚂蚁笔记,但是使用感受实在不咋滴;一段时间以来,只能勉强用群晖自带的弱智Note Station来记录个人资料,真怕哪天自己也搞弱智了。

最近实在受不了Note Station的反人类操作了,不得不再次开启寻找解决方案的征途,幸运的是,Eureka…… 为知笔记的私有化方案终于让我解放啦

胡萝虎 

在群晖中搭建Cloudreve网盘系统

众所周知,某度网盘为了挣钱,各种极限限速,下载限速能把人恶心死。但是,网盘类服务越来越成为人们的刚需,不管是个人生活中的照片,还是工作学习中各类资料,相信很多人都需要使用到网盘进行存储和分享。如果你不想忍受某度的速度,建议有条件的朋友可以试试自己搭建一套网盘系统,本文以Cloudreve为例,在群晖NAS上搭建一套属于自己的私人网盘服务,供读者们参考

胡萝虎 

在群晖上搭建Bitwarden密码管理服务器

管理密码是很多人头痛的事,密码设置简单好记又不太安全,设置复杂又容易忘。为了解决这个难题,市面上出现了不少密码管理工具,帮助人们管理在各种平台、系统、网站、APP上设置的密码,比如1Password、Lastpass、KeePass等,不过绝大多数需要付费才能使用。本着能白嫖就绝不花一个子儿的原则,今天我就来介绍一个不需要花钱的密码管理器——Bitwarden

胡萝虎 

使用Docker一键安装服务端神器Appwrite

Appwrite是一个基于Docker的开源的端到端开发者平台,其容器化的微服务库可应用于网页端,移动端,以及后端。Appwrite 通过视觉化界面极简了从零编写 API 的繁琐过程,在保证软件安全的前提下为开发者创造了一个高效的开发环境。

简单来说,如果你只会前端开发,不懂后端技术,那么这个神器就可以帮你轻松完成后端服务搭建,包括账户、用户、团队、数据库、存储、云函数等等,目前支持各类前端平台,包括Flutter、Vue、Angular、React、iOS和Android等

胡萝虎 

Leave A Comment