拿下奇怪的前端报错(五):SyntaxError: Unexpected token ‘??=‘或‘xxx‘ - 基于容器搭建开发环境或许是更好的选择

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 在前端开发中,同时维护多个项目时可能会遇到不同Node.js版本的问题。低版本Node.js可能导致依赖无法安装或启动失败,而高版本Node.js则可能引起第三方库的兼容性问题。推荐使用Docker搭建独立的开发环境,以避免版本不一致带来的困扰。

在前端开发时,如果同时维护多个项目,跨越的年度又比较大,难免会使用多个Nodejs版本。有时候版本不对,不仅仅是安装会报错

1 依赖无法安装

一般情况下nodejs又向后兼容较好(除了部分三方包),所以安装依赖的时候,高版本node安装低版本包问题不大,但低版本Node安装高版本需求的包就会有问题。

版本过低报错

vue-i18n@9.14.1: The engine "node" is incompatible with this module. Expected version ">= 16". Got "14.21.2"

解决办法

如果只是安装问题,简单的忽略node引擎即可

yarn install --ignore-engines

// npm 类似

2 前端开发环境启动不了

前端框架由于都是第三方维护,很少把兼容性做的特别好,因为主要还是优化的开发体验、效率、性能等收益比较大的。这时候,如果版本过高/过低,都会出错,对新入行的小伙伴肯定是一个挑战,记得之前带应届生-他们也被这折磨的很糟糕,要是当时写篇文收集下可能更好,当时我也是带人新手-真有些内疚。

2.1 Nodejs版本过低

Nodejs版本过低,经常会遇到这个预期外符号的报错(需要注意是否为启动报错,也就是internal包,而不是业务代码文件的错!),大多数情况下是nodejs版本过低,内部的语法不兼容。

(node:24932) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token  

'??='

   at Loader.moduleStrategy (internal/modules/esm/translators.js:149:18)    

(Use `node --trace-warnings ...` to show where the warning was created)      

(node:24932) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch().  

To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

(node:24932) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

SyntaxError: Unexpected token '??='

   at wrapSafe (internal/modules/cjs/loader.js:1001:16)

   at Module._compile (internal/modules/cjs/loader.js:1049:27)

   at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)        

   at Module.load (internal/modules/cjs/loader.js:950:32)

   at Function.Module._load (internal/modules/cjs/loader.js:790:12)

   at Module.require (internal/modules/cjs/loader.js:974:19)

   at require (internal/modules/cjs/helpers.js:101:18)

   at Object.<anonymous> (D:\projects\cloudpcadmin\modules\voi-server\node_modules\.prisma\client\index.js:25:5)

   at Module._compile (internal/modules/cjs/loader.js:1085:14)

   at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10

2.2 Nodejs版本高

版本过高,同样会有问题,尤其是第三方涉及到构建过程的那些。很多库都慢慢的消失了,尤其是一些以前c完成的库,不少被js或者rust等取代,高版本的nodejs使用高版本的v8引擎,这时候ffi很多接口可能就变了,于是你会发现类似node-sass一类的每个node版本有个对应的数字.node文件,高版本就推荐用sass了。

Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (115)

For more information on which environments are supported please see:

https://github.com/sass/node-sass/releases/tag/v4.14.1

   at module.exports (C:\Users\by4474\Documents\projects\cds-operate\node_modules\node-sass\lib\binding.js:13:13)

   at Object.<anonymous> (C:\Users\by4474\Documents\projects\cds-operate\node_modules\node-sass\lib\index.js:14:35)

   at Module._compile (node:internal/modules/cjs/loader:1358:14)

   at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)

   at Module.load (node:internal/modules/cjs/loader:1208:32)

   at Module._load (node:internal/modules/cjs/loader:1024:12)

   at Module.require (node:internal/modules/cjs/loader:1233:19)

   at require (node:internal/modules/helpers:179:18)

   at getDefaultSassImpl (C:\Users\by4474\Documents\projects\cds-operate\node_modules\sass-loader\dist\index.js:198:10)

   at Object.loader (C:\Users\by4474\Documents\projects\cds-operate\node_modules\sass-loader\dist\index.js:80:29)

3 推荐用docker搭建开发环境

3.1 nvm频繁切换容易出错

因为nvm是全局的,在多个项目联调时,切换到14版本,启动一个服务,然后切换到20启动一个vite项目,中途某个进程崩了或者起了新工程,又不知道切换到了什么版本。这时候如果重启下某个项目(偶尔会因为缓存hmr出问题等),又会遇到报错,大脑会卡一下

3.2 docker是一个完全独立的环境

docker是一个完全独立的环境,各个nodejs共存,只需要把整个工程目录作为虚拟盘挂载到容器内,再使用容器内的node/npm就不会出现不一致的问题了。详细的流程可以参考之前的文章

《拿下奇怪的前端报错》:nvm不可用报错`GLIBC_2.27‘‘GLIBCXX_3.4.20‘not Found?+ 使用docker构建多个前端项目实践_docker gclib2.27-CSDN博客

链接

4 总结

稍微总结下

遇到难以理解的报错,首先确定报错文件,如果是项目文件就检查编译目标/语法

如果报错来自于nodejs的内部/第三方包,检查下nodejs版本

使用docker搭建开发环境是不错的选择


目录
打赏
0
1
1
0
58
分享
相关文章
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
79 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
容器化与微服务:构建高效开发环境的双剑合璧
【10月更文挑战第20天】本文探讨了容器化技术(如Docker和Kubernetes)与微服务架构的结合,如何共同构建高效、灵活的开发环境。容器化解决了环境一致性、快速部署和资源隔离的问题,而微服务架构则提升了系统的可维护性和可扩展性。通过容器编排工具、CI/CD流程和服务网格,两者的结合进一步优化了开发和运维效率。文章还分享了实施这两项技术的最佳实践和职业心得。
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
101 5
前端的全栈之路Meteor篇(一):开发环境的搭建 -全局安装或使用容器镜像
本文介绍了如何搭建 Meteor 开发环境,包括全局安装 Meteor 工具和使用 Docker 镜像两种方法,以及创建和运行一个简单的 Meteor 项目的基本步骤。 Meteor 是一个全栈 JavaScript 框架,适用于构建实时 Web 应用程序。文章还提供了遇到问题时的解决建议和调试技巧。
254 3
拿下奇怪的前端报错(六):多摄手机webrtc拉取视频流会导致应用崩溃,从而无法进行人像扫描
本文介绍了一种解决手机摄像头切换导致应用崩溃的问题的方法。针对不支持facingMode配置的四摄手机,通过缓存和序号切换的方式,确保应用在特定设备上不会频繁崩溃,提升用户体验。
157 1
深入理解Docker容器化技术,打造高效开发环境
深入理解Docker容器化技术,打造高效开发环境
容器技术实践:在Ubuntu上使用Docker安装MySQL的步骤。
通过以上的操作,你已经步入了Docker和MySQL的世界,享受了容器技术给你带来的便利。这个旅程中你可能会遇到各种挑战,但是只要你沿着我们划定的路线行进,你就一定可以达到目的地。这就是Ubuntu、Docker和MySQL的灵魂所在,它们为你开辟了一条通往新探索的道路,带你亲身感受到了技术的力量。欢迎在Ubuntu的广阔大海中探索,用Docker技术引领你的航行,随时准备感受新技术带来的震撼和乐趣。
34 16
zabbix7.0.9安装-以宝塔安装形式-非docker容器安装方法-系统采用AlmaLinux9系统-最佳匹配操作系统提供稳定运行环境-安装教程完整版本-优雅草卓伊凡
zabbix7.0.9安装-以宝塔安装形式-非docker容器安装方法-系统采用AlmaLinux9系统-最佳匹配操作系统提供稳定运行环境-安装教程完整版本-优雅草卓伊凡
93 30
自学软硬件第755 docker容器虚拟化技术youtube视频下载工具
docker容器虚拟化技术有什么用?怎么使用?TubeTube 项目使用youtube视频下载工具
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等