Vue整合Monaco组件报错

vue整合monaco组件

报错信息:

ERROR in ./node modules/monaco-editor/esm/vs/language/typescript/tsMode.js

Module build failed (from ./node modules/babel-loader/lib/index.js):SmntaxEror: D: coadelwetProjectlowmn myoj-infront node modules manaco-editorlesnmvs langlageltypescript tsbode.js: Statitc clas blocks are not enabed. please add &babelplugin-transfom-classtatic-block to your configuration

报错图片如下:

错误的根本原因是因为导入monaco时使用了这个语句:

复制代码
import * as monaco from "monaco-editor";

解决办法:

1.执行

bash 复制代码
npm install --save-dev @babel/plugin-transform-class-static-block

命令,下载依赖

2.打开项目babel.config.js文件,加入下面配置

javascript 复制代码
plugins: ["@babel/plugin-transform-class-static-block"],
复制代码
如图所示:
相关推荐
你脸上有BUG几秒前
SSE库选型+fetch-event-source示例
前端·sse·通知订阅
Never_every991 分钟前
8 个高清 4K 视频素材网址!无水印可商用
大数据·前端·音视频·视频
NotFound4865 分钟前
分享实战中Python Web 框架对比:Django vs Flask vs FastAPI
前端·python·django
冰暮流星5 分钟前
javascript之表单事件1
开发语言·前端·javascript
Dalydai10 分钟前
AI 辅助前端开发:两个月踩坑实录
前端·ai编程
前端那点事11 分钟前
Vue跨页面通信(8种主流方式|完整可运行Demo,Vue2/Vue3通用)
前端·vue.js
a_Ichuan12 分钟前
在HBuilderX创建的uniapp项目中使用unocss
前端·uni-app
里欧跑得慢13 分钟前
12. CSS滤镜效果详解:为页面注入艺术灵魂
前端·css·flutter·web
里欧跑得慢14 分钟前
CSS 级联层:控制样式优先级的新方式
前端·css·flutter·web
前端那点事15 分钟前
Vue大文件上传实现方案(企业级完整版)
前端·vue.js