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

[carlosmaniero]

Version

3.0.7

Reproduction link

https://github.com/carlosmaniero/vue-create-component-instance-error

Steps to reproduce

1. Clone the project: https://github.com/carlosmaniero/vue-create-component-instance-error
2. Build the project

yarn
yarn start

3. Open http://localhost:8080/
4. Look at the browser console.

More info:

There is also this webpack warning:

WARNING in ./node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js 96:63-70
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/@vue/server-renderer/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/HelloWorld.vue?vue&type=template&id=b9167eee&scoped=true
 @ ./src/components/HelloWorld.vue?vue&type=template&id=b9167eee&scoped=true
 @ ./src/components/HelloWorld.vue
 @ ./main.js
 @ ./browser.js

What is expected?

To have SSR working 😀

What is actually happening?

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

---

If I remove this line from webpack server config:
https://github.com/carlosmaniero/vue-create-component-instance-error/blob/master/webpack.server.js#L14
I have the same error from server.

Also, I'm using the webpack configuration provided by @vue/cli-service. All I did was about to remove some stuff I didn't want to use.

There is this workaround:

resolve: { mainFields: ['main', 'module'] }

Extracted from: #2244 (comment)

However, it increases significantly the build time beyond that it also result in an empty hydration result.

[HcySunYang]

You should use createSSRApp in browser.js:

createSSRApp(Main()).mount(document.getElementById('app'))

For that workaround, yes, that’s because the default behavior of webpack is that the module field has a higher priority.

[reinink]

@HcySunYang How does using createSSRApp in browser.js help with the server render (in server.js)?

I am trying to get SSR working in Vue 3 with Webpack, and running into the same error:

> node public/js/ssr.js

/Users/jonathan/Sites/inertia-ssr-vue3/public/js/ssr.js:15239
const { createComponentInstance, setCurrentRenderingInstance, setupComponent, renderComponentRoot, normalizeVNode } = vue.ssrUtils;
        ^

TypeError: Cannot destructure property 'createComponentInstance' of 'vue.ssrUtils' as it is null.
    at Object../node_modules/@vue/server-renderer/dist/server-renderer.cjs.js (/Users/jonathan/Sites/inertia-ssr-vue3/public/js/ssr.js:15239:9)
    at __webpack_require__ (/Users/jonathan/Sites/inertia-ssr-vue3/public/js/ssr.js:44399:42)
    at Object../node_modules/@vue/server-renderer/index.js (/Users/jonathan/Sites/inertia-ssr-vue3/public/js/ssr.js:16007:20)
    at __webpack_require__ (/Users/jonathan/Sites/inertia-ssr-vue3/public/js/ssr.js:44399:42)
    at /Users/jonathan/Sites/inertia-ssr-vue3/public/js/ssr.js:44472:78
    at /Users/jonathan/Sites/inertia-ssr-vue3/public/js/ssr.js:44531:3
    at Object.<anonymous> (/Users/jonathan/Sites/inertia-ssr-vue3/public/js/ssr.js:44533:12)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)

Any tips? 😬

[carlosmaniero]

Hello @reinink!

In order to make it working at the server webpack config I needed to externalize dependencies:

https://github.com/carlosmaniero/vue-create-component-instance-error/blob/master/webpack.server.js#L14

[reinink]

@carlosmaniero THANK YOU SO MUCH. That worked! 🙌