TypeError：无法解构“vue.ssrUtils”的属性“createComponentInstance”，因为它为空

Question

当我使用 vue-next 从 Vue 2 升级到 Vue 3 后，我收到了由@vue/server-renderer.

TypeError: Cannot destructure property 'createComponentInstance' of 'vue.ssrUtils' as it is null.
  at Object../node_modules/@vue/server-renderer/dist/server-renderer.cjs.js (/path-to-project/dist/js/webpack:/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:125:1

看着node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:125:1

var vue = require('vue');
// some code here ...
const { createComponentInstance, /* other extracted vars*/ } = vue.ssrUtils; // line 125

好像vue.ssrUtils是null！

包.json

{
  "dependencies": {
    ...
    "@vue/server-renderer": "^3.0.0",
    "vue": "^3.0.0",
  }
}

Answer 1

发生错误是因为 vue@next 提供了一个 esm 版本，它剥离了 ssr api，如果你检查 vue@next package.json 你会发现这些代码：

\n

{\n    // ...\n    "main": "index.js",\n    "module": "dist/vue.runtime.esm-bundler.js",\n    // ...\n}\n

\n

与 @vue/runtime-dom 和 @vue/runtime-core 相同

\n

ssrUtils 在 @vue/runtime-core\ 的“main”文件中公开，而“module”则公开“null”。

\n

如果您的项目使用纯 Nodejs 运行，则永远不会使用“模块”选项，因为 Node.js 无法识别它\xef\xbc\x8c，因此此问题仅在您使用其他工具构建项目时存在。

\n

如果您使用 webpack，此选项将更改 main/module/browser 选项的优先级并解决您的问题：

\n

{\n    // ...\n    "resolve": {\n        "mainFields": ["main", "module"]\n    }\n    // ...\n}\n

\n