Vue3 SSR运行node src/server.jsx报initDirectivesForSSR不是函数如何解决

问题根因 #

你遇到的TypeError: vue.initDirectivesForSSR is not a function报错，核心原因是项目中vue依赖包和@vue/server-renderer依赖包的版本不匹配，initDirectivesForSSR是Vue 3.2.0及以上版本才新增的API，如果你的vue版本低于3.2.0，或是两个包的版本号没有完全对齐，就会触发该错误。

解决方案 #

按以下步骤操作即可修复：

• 第一步：先检查当前两个依赖的版本是否一致，执行命令：

npm list vue @vue/server-renderer

如果输出的两个包版本号不相同，即可确认是版本不匹配问题。

• 第二步：统一两个包的版本，建议直接升级到最新稳定版，也可以指定相同版本号：

# 升级到最新稳定版
npm install vue@latest @vue/server-renderer@latest

# 也可以手动指定完全一致的版本号，示例：
# npm install vue@3.3.13 @vue/server-renderer@3.3.13

• 第三步：清理冗余依赖并重新构建

1. 删除项目根目录下的node_modules文件夹，以及包锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）
2. 重新执行依赖安装命令：npm install
3. 重新执行SSR构建流程，再启动服务即可。

可选校验 #

如果操作后仍报错，可以执行npm dedupe命令对依赖做去重处理，避免项目中存在多个版本的Vue副本导致调用异常。

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