vue ssr 报错 ReferenceError: MouseEvent is not defined / window is not defined 等等

作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
邮箱 ：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/130152398

1. 错误描述

在使用服务端渲染时（基于Vue+vite），将在普通vue项目的组件复制过来，出现了 MouseEvent is not defined 报错，其原文如下：

ReferenceError: MouseEvent is not defined
    at setup (D:/desktop/aaaaaaa/src/components/switchs/Switch.vue:36:12)
    at _sfc_main.setup (/src/components/switchs/Switch.vue:61:23)
    at callWithErrorHandling (D:\desktop\aaaaaaa\node_modules\.pnpm\@vue+runtime-core@3.2.45\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:157:22)
    at setupStatefulComponent (D:\desktop\aaaaaaa\node_modules\.pnpm\@vue+runtime-core@3.2.45\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7176:29)
    at setupComponent (D:\desktop\aaaaaaa\node_modules\.pnpm\@vue+runtime-core@3.2.45\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7131:11)
    at renderComponentVNode (D:\desktop\aaaaaaa\node_modules\.pnpm\@vue+server-renderer@3.2.45_vue@3.2.45\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:172:17)
    at Proxy.ssrRenderComponent (D:\desktop\aaaaaaa\node_modules\.pnpm\@vue+server-renderer@3.2.45_vue@3.2.45\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:624:12)
    at _sfc_ssrRender (/src/App.vue:91:31)
    at renderComponentSubTree (D:\desktop\aaaaaaa\node_modules\.pnpm\@vue+server-renderer@3.2.45_vue@3.2.45\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:254:17)
    at renderComponentVNode (D:\desktop\aaaaaaa\node_modules\.pnpm\@vue+server-renderer@3.2.45_vue@3.2.45\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:188:16)
    at Proxy.renderToString (D:\desktop\aaaaaaa\node_modules\.pnpm\@vue+server-renderer@3.2.45_vue@3.2.45\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:450:26)
    at render (D:/desktop/aaaaaaa/src/entry-server.ts:12:21)
    at async file:///D:/desktop/aaaaaaa/server.js:54:22

在一个 vue 组件中，有大概如下的代码：

const emit = defineEmits({
  "click": (evt: MouseEvent) => evt instanceof MouseEvent,
})

const slider = ref(null);

const baseColor = useCssVar('--base-color', slider);

// 这里是报错的位置：
const evt = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  view: window,
});

其实类似的可能还有这样的报错：window is not defined…。

2. 报错原因

注意这个报错不是 ts 的，因此并不是没有使用 lib:["dom"]，如果仅仅是在类型注释中使用了 MouseEvent，是没有问题的。比如：

const emit = defineEmits({
  "click": (evt: MouseEvent) => evt instanceof MouseEvent,
})

原因在于：

在使用 node 服务端进渲染期间 使用浏览器运行时中的的全局对象是不存在的。

3. 解决方案

可以将需要用到的 浏览器 对象 放入 vue 的某些生命周期钩子，让他们处于客户端渲染阶段，如放入 mounted。

例如在 setup 语法下，上面使用到 MouseEvent 的代码可以这样略加修改：

let evt:MouseEvent;

onMounted(()=>{
    evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  })
})

当然你也可以使用这样的方式将一些浏览器全局对象绑定，不过滥用这些对象又回到了 客户端渲染，需要自己依据情况进行甄别。