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

作者 胡萝虎 日期 2022-03-22
React
解决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上。

└─┬ react-scripts@5.0.0
  ├─┬ css-minimizer-webpack-plugin@3.4.1
  │ └── jest-worker@27.5.1 
  ├─┬ eslint-webpack-plugin@3.1.1
  │ └── jest-worker@27.5.1  deduped
  ├─┬ jest@27.5.1
  │ └─┬ @jest/core@27.5.1
  │   ├─┬ @jest/reporters@27.5.1
  │   │ └── jest-worker@27.5.1  deduped
  │   └─┬ jest-runner@27.5.1
  │     └── jest-worker@27.5.1  deduped
  ├─┬ jest-resolve@27.5.1
  │ └─┬ jest-haste-map@27.5.1
  │   └── jest-worker@27.5.1  deduped
  ├─┬ terser-webpack-plugin@5.3.1
  │ └── jest-worker@27.5.1  deduped
  └─┬ workbox-webpack-plugin@6.5.1
    └─┬ workbox-build@6.5.1
      └─┬ rollup-plugin-terser@7.0.2
        └── jest-worker@26.6.2

由于博主不是专业的前端开发，残存的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-scripts或typescrip包有关喽！

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

大家都在看

“扫一扫接着看”
FRIENDS