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 提供了一个 esm 版本，它剥离了 ssr api，如果你检查 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"]
    }
    // ...
}

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

1 个答案: