Vue-loader: functional components not working with SSR

Created on 20 Feb 2018 · 12Comments · Source: vuejs/vue-loader

Version

14.1.0

Reproduction link

https://codesandbox.io/s/ww3zv68z7w

Steps to reproduce

It's not reproducible in codesandbox link I gave because it needs Server Side Rendering.

To reproduce:

set up vuejs with SSR
define a .vue file with a functional component
request a page that uses this component

What is expected?

The component should show as defined in template

What is actually happening?

SSR Throws the following error:

ssr

Source

lsimone

👍2

Most helpful comment

Just tested with vue, vue-template-compiler and vue-server-renderer @ 2.5.15 and vue-loader @ 14.2.1, and functional templates are working correctly in SSR. If the problem persists, please open a new issue with a proper reproduction repo.

yyx990803 on 13 Mar 2018

🎉3

All 12 comments

I just tried to provoke the error in a test but failed...

Here is my stack trace from the app throwing the type error:

{ TypeError: _vm._ssrEscape is not a function
    at render (components/UI/PdfTitle.vue?9a93:3:0)
    at renderWithStyleInjection (node_modules/nuxt/node_modules/vue-loader/lib/runtime/component-normalizer.js:86:0)
    at createFunctionalComponent (/Users/nappdev/projects/webviewer4/node_modules/vue/dist/vue.runtime.common.js:4008:30)
    at createComponent (/Users/nappdev/projects/webviewer4/node_modules/vue/dist/vue.runtime.common.js:4180:12)
    at _createElement (/Users/nappdev/projects/webviewer4/node_modules/vue/dist/vue.runtime.common.js:4361:15)
    at createElement (/Users/nappdev/projects/webviewer4/node_modules/vue/dist/vue.runtime.common.js:4298:10)
    at vm._c (/Users/nappdev/projects/webviewer4/node_modules/vue/dist/vue.runtime.common.js:4414:42)
    at Proxy.render (pages/viewer/_viewer.vue?1424:24:0)
    at VueComponent.Vue._render (/Users/nappdev/projects/webviewer4/node_modules/vue/dist/vue.runtime.common.js:4472:22)
    at renderComponentInner (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7356:25)
    at renderComponent (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7326:5)
    at renderNode (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7242:5)
    at renderComponentInner (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7362:3)
    at renderComponent (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7326:5)
    at renderNode (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7242:5)
    at renderComponentInner (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7362:3)
    at renderComponent (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7326:5)
    at renderNode (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7242:5)
    at renderComponentInner (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7362:3)
    at renderComponent (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7326:5)
    at renderNode (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7242:5)
    at renderComponentInner (/Users/nappdev/projects/webviewer4/node_modules/vue-server-renderer/build.js:7362:3) statusCode: 500, name: 'TypeError' }

And the component (_PdfTitle.vue_):

<template functional>
  <span>{{ props.title }}</span>
</template>

dotnetCarpenter on 12 Mar 2018

👍3

This should have been fixed in Vue core 2.5.14+

yyx990803 on 12 Mar 2018

@yyx990803 I updated my project with vue and tried again.
The result is again error:

Error is:

[Vue warn]: Error in render: "TypeError: _vm._ssrNode is not a function"

found in

---> <App> at src/App.vue
       <Root>

The component is just:
<template functional> <body> <div> kitchensink BELLA </div> </body> </template>

vue version 2.5.15
vue-loader version 14.1.1

lsimone on 12 Mar 2018

👍1

I got the issue with latest Vue, vue-loader and vue-server-renderer. I'll see if I can create a reproducible repo in nuxt.

dotnetCarpenter on 13 Mar 2018

is it possible to reopen the issue, then?

lsimone on 13 Mar 2018

yyx990803 on 13 Mar 2018

🎉3

I tried with the version you wrote.
Everything's fine now, thanks :+1:

lsimone on 14 Mar 2018

I'm baffled. I had the exact same versions two days ago but now it works. Perhaps I have npm issue. Anyway it works. @yyx990803 thank you for taking time for this issue.

dotnetCarpenter on 14 Mar 2018

I have the exact same problem when my functional component is made with template, can't reproduce if i use the render function tho.
Since codesandbox only allow to use nuxt 2.1 i can't make a really identical environment example.

Throw ssr error:

<template functional>
  <span>{{ props.title }}<span>
</template>
<script>
export default {
  name: 'func-template',
  functional: true,
  props: {
    title: {
      type: String,
      required: true,
    },
  },
};
</script>

Doesn't throw ssr error:

<script>
export default {
  name: 'func-render',
  functional: true,
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  render(h, { props }) {
    return <span>{ props.title }<span>;
  },
};
</script>

Yimiprod on 23 Oct 2018

I have the same issues with VuePress v0.14.4

OfekA on 24 Oct 2018

I just stumbled across the same error "TypeError: _vm._ssrNode is not a function" but it only showed when registering the functional component locally. When registered globally ssr works fine.

MarcRoemmelt on 5 Apr 2019

It's definitely not working i created a vuepress plugin that will use components from projetcs that are basically spa so no ssr... and if i want

<template functional>
  <div>
    <no-ssr>
      <h1>Hello {{props.text}}</h1>
    </no-ssr>
  </div>
</template>


<script>
export default {
  props: {
    text: {
      type: String,
      default: ""
    }
  }
}
</script>

<docs>
  <withtemplate />
</docs>

i have to put no-ssr if not its just breaking with that error