"You are using the runtime-only" Warning on version 2.2.0

[asafyish]

Version

2.2.0

Vue.js version

2.4.4

What is exptected?

To not get this warning, as it was in version 2.1.3

What is actually happening?

I am getting a warning:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

--->

How to repreduce this problem?

Create a version using:

vue init webpack my-project

with runtime-only configuration.

[a-kriya]

That error is unrelated to this component (you will see the same warning even with v2.1.3 if you don't change anything else). Here.

[asafyish]

@Syn-zeta I am aware of this vue behavior and that's not the case.
I verified multiple times, on versoin 2.2.0 I am getting the warning, on version 2.1.3 I am not - nothing else changed.

[asafyish]

I am actually pretty sure it's from commit 6168c31.

[a-kriya]

My bad for the wrong assumption. Moving out the spinners to its own component in a .vue file should fix this issue (and also reduce the bloat in the main component).

[PeachScript]

My mind is the spinners just need template, so use the local registration may be better, is this problem caused by the local registration of component?

[asafyish]

The warning is happening on usage, not on registration. I am registering infinite-loader just once, globally, in my main.js:

import VueVirtualScroller from 'vue-virtual-scroller/dist/vue-virtual-scroller';
Vue.use(VueVirtualScroller);

And then, each time I am using a component, I am getting the warning.

[Jussiadev]

I have the same problem also in the basic example
#87

[Jussiadev]

@asafyish Hey. I have the same problem. Have you found a solution?

[PeachScript]

@Jussiadev @asafyish you can use Runtime + Compiler build of Vue.js to solve this temporarily, and could you tell me the reason that you want to the Runtime-only build of Vue.js?

[asafyish]

@PeachScript I was mistaken. I am registering vue-infinite-loading in a local component, not global and still getting the warning.

@Jussiadev No solution so far. The right solution is probably a fix in the library itself.

[Jussiadev]

@PeachScript why this happens even I use your base example

[PeachScript]

@asafyish @Jussiadev perhaps I did not make it clear.

This component use the local registration component as the spinners, and the local registration component was not be pre-compiled when this component be released, but your project use the Runtime-only build version of Vue.js, it does not include the template compiler, the warning will be thrown when the Vue.js try to render a uncompiled template.

So there has a temporary solution to solve it, just change your Vue.js version from Runtime-only to Runtime + Compiler, simply to do it in your webpack configurations:

...
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}
...

[asafyish]

@PeachScript Yeah that's a great temporary solution, but long-term, I think it's better not to mandate including the compiler in addition to the runtime.

[PeachScript]

@asafyish of course! I will replace all spinners templates with the compiled templates in the next version.

[PeachScript]

Hi @asafyish @Jussiadev , the new version v2.2.1 has been released, includes this fix, you can try it now.

[Jussiadev]

@PeachScript Thank you so much.
Sorry, that is off topic, but how to hide the spinner

[PeachScript]

@Jussiadev it does not matter, they are same problem.

You can create an empty element to hide the spinner through slot feature.

[asafyish]

Can verify that it's working correctly in 2.2.1.

[Jussiadev]

@PeachScript Does not help

<infinite-loading @infinite="infiniteHandler" spinner="circle">
                <span slot="slot"></span>
            </infinite-loading>

[asafyish]

Do you mean ?

<infinite-loading @infinite="infiniteHandler" spinner="circle">
  <span slot="spinner"></span>
  </infinite-loading>

notice the slot name.

[Jussiadev]

@asafyish Thank you. Now it works