TypeError: Cannot destructure property 'createComponentInstance' of 'vue.ssrUtils' as it is null

user_7565577 0
Viewed 1947

After I upgraded from Vue 2 to Vue 3 using vue-next, I got this error caused by @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

Looking at 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

It seems like vue.ssrUtils is null!

package.json

{
  "dependencies": {
    ...
    "@vue/server-renderer": "^3.0.0",
    "vue": "^3.0.0",
  }
}
vue.js javascript
1 Answers

The error occures because vue@next provides an esm version which strips ssr apis, If you check vue@next package.json you'll find these codes:

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

same with @vue/runtime-dom and @vue/runtime-core

ssrUtils is exposed in @vue/runtime-core's "main" file, while "module" expose "null".

if your project is running with pure nodejs, the "module" option will never be used because node.js doesn't recognize it，so this issue only exists while you build your project using other tools.

If you're using webpack, this option will change the priority of main/module/browser options and fix your problem:

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