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"],
复制代码
如图所示:
相关推荐
甘露寺1 小时前
深入理解 Axios 请求与响应对象结构:从配置到数据处理的全面指南
javascript·ajax
追梦人物1 小时前
Uniswap 手续费和协议费机制剖析
前端·后端·区块链
招风的黑耳2 小时前
Axure 高阶设计:打造“以假乱真”的多图片上传组件
javascript·图片上传·axure
拾光拾趣录2 小时前
基础 | 🔥6种声明方式全解⚠️
前端·面试
flashlight_hi3 小时前
LeetCode 分类刷题:209. 长度最小的子数组
javascript·算法·leetcode
喝拿铁写前端3 小时前
为什么数据变了界面却不动?——Vue / React / Angular 常见渲染“失效”场景全解析
前端框架·代码规范·响应式编程
朱程3 小时前
AI 编程时代手工匠人代码打造 React 项目实战(四):使用路由参数 & mock 接口数据
前端
PineappleCoder3 小时前
深入浅出React状态提升:告别组件间的"鸡同鸭讲"!
前端·react.js
kfepiza4 小时前
Promise,then 与 async,await 相互转换 笔记250810
javascript
wycode4 小时前
Vue2源码笔记(1)编译时-模板代码如何生效之生成AST树
前端·vue.js