Nuxt.js集成jsPlumb时出现document is not defined错误该如何解决

报错根因 #

Nuxt 默认开启服务端渲染（SSR），服务端运行环境不存在浏览器端的 document、window 等全局对象。你在脚本顶部静态导入 jsPlumb 时，导入逻辑会优先于组件生命周期执行，服务端打包阶段加载jsPlumb依赖时会直接执行其内部访问document的代码，和mounted内是否加process.client判断无关，所以会提前触发报错。

可行解决方案 #

方案1：客户端动态导入（单页面使用推荐） #

无需额外配置，直接修改组件代码即可：

1. 删除脚本顶部的静态导入语句
2. 在mounted的客户端判断块内用动态导入语法加载jsPlumb
   代码示例：

<template>
  <client-only>
    <div id="canvas" />
  </client-only>
</template>

<script>
export default {
  async mounted () {
    if (process.client) {
      console.log('MOUNTED - 2')
      // 动态导入仅在客户端执行，不会触发服务端报错
      const { jsPlumb } = await import('jsplumb')
      jsPlumb.ready(function () {
        console.log('MOUNTED - 3')
        // 后续jsPlumb初始化逻辑写在这里
      })
    }
  }
}
</script>

方案2：配置为客户端全局插件（多页面使用推荐） #

如果项目多个页面都需要用到jsPlumb，可以封装为全局客户端插件：

1. Nuxt3 操作步骤：
   在plugins目录下新建jsplumb.client.js文件，后缀.client.js会告知Nuxt该插件仅在客户端加载：

import { jsPlumb } from 'jsplumb'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      jsPlumb
    }
  }
})

页面内直接调用全局注入的实例即可：

export default {
  mounted () {
    if (process.client) {
      this.$jsPlumb.ready(() => {
        // 业务逻辑
      })
    }
  }
}

2. Nuxt2 操作步骤：
   在plugins目录下新建jsplumb.js文件：

import { jsPlumb } from 'jsplumb'
import Vue from 'vue'

Vue.prototype.$jsPlumb = jsPlumb

在nuxt.config.js中配置插件仅客户端加载：

export default {
  plugins: [
    { src: '~/plugins/jsplumb.js', ssr: false }
  ]
}

页面使用方式和Nuxt3一致。

修改后重新运行项目即可解决document is not defined报错，控制台会正常打印对应日志。

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