Uncaught (in promise) TypeError: Cannot readproperties of null (reading “addEventListener“)

最新推荐文章于 2025-04-26 13:25:33 发布

孤城浪人

最新推荐文章于 2025-04-26 13:25:33 发布

阅读量3.8k

点赞数

分类专栏：错误记录文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_46015333/article/details/127407308

版权

错误记录专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在Vite Vue2项目中使用monaco-editor插件时遇到的创建编辑界面失败问题，着重于拼写错误、Vue版本差异及正确获取DOM的方法。提供了解决方案，包括检查ref名称一致性、Vue3的ref处理以及时机把握等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误环境

使用monaco-editor插件报错不能正常打开编辑界面
在这里插入图片描述

环境

vite
vue2
"monaco-editor": "0.28.1"
"vite-plugin-monaco-editor": "1.0.10"

原因

async hangeVisible() {
	const { monaco } = await import('./customMonaco');
	if (!this.editor) {
	  this.editor = monaco.editor.create(this.$refs.monacoDom, {
		theme: this.curTheme,
		automaticLayout: true,
		language: this.language
	  });
	}
       ···
}

在使用monaco.editor.create方法是没有拿到dom节点，也就是this.$refs.monacoDom这段代码无效。

解决办法

检查dom元素上绑定的 ref 的拼写是否与函数中的一致。
注意你使用的是 vue2 还是 vue3 ，vue2使用this.$refs.xxx拿到dom元素，vue3需要先声明一个变量并 return 出去，还要在 dom 元素上以该变量名绑定 ref。
使用vue3还需注意拿 dom 节点的时机，因为 vue3 会先执行一遍 setup 函数，此时还没有 dom 所以需要使用 nextTick 。