Vue functional component throws _c is not defined error

Question

I created the following functional component using render method:

import Vue from "vue"

const { render, staticRenderFns } = Vue.compile(`<div>Hello World</div>`)

Vue.component("HelloWorld", {
    functional: true,
    render,
    staticRenderFns
})

And then in App.vue:

<template>
    <div id="app">
        <HelloWorld />
    </div>
</template>

<script>
export default {
    data() {
        return {
            compiled: false
        }
    }
}
</script>

<style>
</style>

And I get the error:

_c is not defined.

Am I doing something wrong here?

See this - stackoverflow.com/questions/44369839/… you need to import your component — sugars
– sugars, Commented Nov 14, 2019 at 8:47
Import my component? But it's already declared as a global component. And also, this issue is only with the functional component. Normal component works fine i.e. if I remove functional: true it works fine. — Axel
– Axel, Commented Nov 14, 2019 at 8:55
@webnoob Damn that's useful. Thank you very much. Although not sure about functional component. — Axel
– Axel, Commented Nov 15, 2019 at 3:43

Decade Moon · Accepted Answer · 2019-11-14 09:41:20Z

0

As far as I'm aware, the render functions generated by Vue.compile cannot be used to render a functional component.

answered Nov 14, 2019 at 9:41

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Axel Over a year ago

Oh crap! That's a bummer. Is there any way to build functional component by passing template string?

Decade Moon Over a year ago

I don't think so. The template compiler bundled with Vue is not able to compile functional templates. I believe only the compiler provided with vue-loader can do this at build time.

Decade Moon Over a year ago

May I ask why you require the use of Vue.compile? Maybe there's a better solution to your problem.

Axel Over a year ago

Actually I fetch html from the server and render it as a Vue component.

Decade Moon Over a year ago

Is what you're fetching plain HTML or is it a Vue template? If it's sanitized HTML then you can just use v-html to render it.

|

MJ_Wales · Accepted Answer · 2019-11-14 11:50:49Z

0

I think the closest thing to creating a functional component from a template string would involve parsing the string to get the element type and attributes and render as:

Vue.component("hello-world", {
      functional: true,
      render: function(createElement, context) {
        return createElement(
          "div",
         'example text'         
        );
      }
});

answered Nov 14, 2019 at 11:50

MJ_Wales

9052 gold badges8 silver badges22 bronze badges

Comments

Michal Levý · Accepted Answer · 2019-11-14 12:35:34Z

As Decade Moon already mentioned, render functions returned by Vue.compile cannot be used as render function in functional component. Reason for that becomes clear when you inspect the signature of the function returned by Vue.compile:

const render: (createElement: any) => VNode

As you can see, function is missing second argument, which is required for render functions of functional components:

render: (createElement: CreateElement, context: RenderContext<Record<never, any>>) => VNode

Functional components are instanceless. That means no this context - that's why additional context parameter is needed to carry props\listeners etc.

Also if you look at this post on Vue forum:

The render function created by compile() relies on private properties of the component. To have access to those properties, the method has to be assigned to a property of the component(so it has access to those properties via this)

However that doesn't mean you can't create functional component with template. You can, you are just not able to use Vue.compile to pass template text dynamically. If you are fine with static template, you can do it like this:

// component.vue

<template functional>
  <div>Hello World</div>
</template>

<script>
export default {
  name: "hello"
};
</script>

...and use the component like any other SFC (single file component = VUE file)

If you need dynamic template text, just use non-functional component instead...

Collectives™ on Stack Overflow

Vue functional component throws _c is not defined error

3 Answers 3

6 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Linked

Related