javascript - 类型错误 : Cannot destructure property 'createComponentInstance' of 'vue.ssrUtils' as it is null

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!

package.json

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

Answer 1

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

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

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

ssrUtils 暴露在@vue/runtime-core 的“main”文件中，而“module”暴露“null”。

如果你的项目是用纯nodejs运行的，“module”选项将永远不会被使用，因为node.js不识别它，所以这个问题只有在你使用其他工具构建项目时才会存在。

如果您使用的是 webpack，此选项将更改主/模块/浏览器选项的优先级并解决您的问题:

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