Nuxt项目渲染Editor.js时出现500 Element is not defined错误

这个错误的核心原因是：Editor.js依赖浏览器环境的Element对象，但Nuxt默认开启服务端渲染（SSR），服务端执行代码时没有浏览器的DOM API，因此触发找不到Element的报错。

下面是几种可行的解决办法：

1. 动态导入Editor.js，仅在客户端初始化 #

修改组件代码，通过动态导入的方式加载Editor.js，同时确保初始化逻辑只在客户端执行：

interface IEditor {
  editor: any | null
}

export default defineComponent({
  data(): IEditor {
    return {
      editor: null
    };
  },

  methods: {
    async initEditor() {
      // 仅在客户端动态加载Editor.js
      const EditorJS = (await import('@editorjs/editorjs')).default;
      this.editor = new EditorJS({
        holder: 'editor',
        placeholder: 'start text'
      })
    },
    destroyEditor() {
      if (this.editor) {
        this.editor.destroy();
      }
    }
  },

  mounted() {
    // 仅在客户端执行初始化
    if (process.client) {
      this.initEditor();
    }
  },

  beforeUnmount() {
    this.destroyEditor();
  }
});

2. 用<client-only>标签包裹组件 #

在页面引入Editor组件时，用Nuxt提供的<client-only>标签，让组件完全在客户端渲染，跳过服务端的执行流程：

<template>
  <div>
    <client-only>
      <Editor/>
    </client-only>
  </div>
</template>

3. 配置Nuxt标记Editor.js为客户端依赖 #

在nuxt.config.ts（或nuxt.config.js）中添加配置，告知Nuxt该包仅在客户端使用：

export default defineNuxtConfig({
  build: {
    transpile: ['@editorjs/editorjs']
  },
  vite: {
    ssr: {
      noExternal: ['@editorjs/editorjs']
    }
  }
});

额外注意 #

别忘了在Editor组件的模板里添加Editor.js需要的容器节点：

<template>
  <div id="editor"></div>
</template>

内容的提问来源于stack exchange，提问作者LukeSkywalker