Vue: SSR Webpack Vue.extends throws: Property or method "_ssrNode" is not defined

[neoneo]

Version

2.5.13

Reproduction link

https://github.com/neoneo/vue-ssr-webpack-error

Steps to reproduce

• Clone the repo
• yarn
• yarn webpack
• node render

For details see the readme in the linked repo.

What is expected?

Output to the console as follows:

<div id="app" data-server-rendered="true"><h1>Hello world</h1></div>

What is actually happening?

The following error:

Vue warn]: Property or method "_ssrNode" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <App> at src/components/App.vue
       <Root>
[Vue warn]: Property or method "_ssrEscape" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <App> at src/components/App.vue
       <Root>
[Vue warn]: Error in render: "TypeError: _vm._ssrEscape is not a function"

found in

---> <App> at src/components/App.vue
       <Root>
TypeError: _vm._ssrEscape is not a function

---

I narrowed this case down to Vue.extend, but I actually want to use Typescript with vue-class-component.

[AdamWei]

Do you solved this problem? I also meet this question.

[AdamWei]

version 2.3.4 also has this problem,

[neoneo]

No, I didn't solve this. However, with bundle renderer it works: https://ssr.vuejs.org/en/bundle-renderer.html.

I do think it would be nice if this was solved at some point, because the basic approach is more straightforward (and for my purposes it would have been sufficient).

[yyx990803]

You are importing Vue and bundling it inside your application, and then requiring another copy of Vue via CommonJS - so there two conflicting copies of Vue in your render script.

You need externalize Vue in your webpack config so that your bundle and the script are using the same copy of Vue. See https://ssr.vuejs.org/en/build-config.html

[Zedonboy]

Hi Evans You, am looking for a way to ask you one question?. You like a model to me in my career, you are my Justin Berbie, my Tony Stark... in my career.

But How did you stay motivated to finish Vue.js?

[simllll]

This solved it for me:

You need externalize Vue in your webpack config so that your bundle and the script are using the same copy of Vue. See https://ssr.vuejs.org/en/build-config.html

The error is a bit misleading (at least for me), but just be sure there is only one Vue instance and you do not bundle Vue in any way to your package.