Hi There, I've been using kendo ui chart for Vue for about 4 months. My old app I did originally import jquery but removed it in the last few months as I was only using the chart component and it continued to work. Just today I've updated my packages to:
"@progress/kendo-base-components-vue-wrapper": "^2018.3.911",
"@progress/kendo-charts-vue-wrapper": "^2018.3.911",
"@progress/kendo-theme-default": "^2.56.0",
"@progress/kendo-ui": "^2018.3.911"
Since then I am receiving the following errors:
--------------------------------------
vue.runtime.esm.js?2b0e:587 [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
---> <KendoChart>
<Chart> at src/components/CommodityChart/Chart.vue
<VCard>
<ChartPanel> at src/components/CommodityChart/ChartPanel.vue
<Index> at src/components/Dashboard/Index.vue
<VContent>
<MemberRoot> at src/components/MemberRoot.vue
<VApp>
<App> at src/components/AppRoot.vue
<Root>
--------------------------------------
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'length' of undefined"
found in
---> <KendoChart>
<Chart> at src/components/CommodityChart/Chart.vue
<VCard>
<ChartPanel> at src/components/CommodityChart/ChartPanel.vue
<Index> at src/components/Dashboard/Index.vue
<VContent>
<MemberRoot> at src/components/MemberRoot.vue
<VApp>
<App> at src/components/AppRoot.vue
<Root>
-----------------------------------------
TypeError: Cannot read property 'length' of undefined
at VueComponent.mounted (index.js?d548:39)
at callHook (vue.runtime.esm.js?2b0e:2917)
at Object.insert (vue.runtime.esm.js?2b0e:4154)
at invokeInsertHook (vue.runtime.esm.js?2b0e:5956)
at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6175)
at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:2666)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:2784)
at Watcher.get (vue.runtime.esm.js?2b0e:3138)
at Watcher.run (vue.runtime.esm.js?2b0e:3215)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:2977)
-------------------------------------------------------------
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'indexOf' of undefined"
found in
---> <KendoChart>
<Chart> at src/components/CommodityChart/Chart.vue
<VCard>
<ChartPanel> at src/components/CommodityChart/ChartPanel.vue
<Index> at src/components/Dashboard/Index.vue
<VContent>
<MemberRoot> at src/components/MemberRoot.vue
<VApp>
<App> at src/components/AppRoot.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:587
logError @ vue.runtime.esm.js?2b0e:1733
globalHandleError @ vue.runtime.esm.js?2b0e:1728
handleError @ vue.runtime.esm.js?2b0e:1717
callHook @ vue.runtime.esm.js?2b0e:2919
insert @ vue.runtime.esm.js?2b0e:4154
invokeInsertHook @ vue.runtime.esm.js?2b0e:5956
patch @ vue.runtime.esm.js?2b0e:6175
Vue._update @ vue.runtime.esm.js?2b0e:2666
updateComponent @ vue.runtime.esm.js?2b0e:2784
get @ vue.runtime.esm.js?2b0e:3138
run @ vue.runtime.esm.js?2b0e:3215
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:2977
(anonymous) @ vue.runtime.esm.js?2b0e:1833
flushCallbacks @ vue.runtime.esm.js?2b0e:1754
Promise.then (async)
microTimerFunc @ vue.runtime.esm.js?2b0e:1802
nextTick @ vue.runtime.esm.js?2b0e:1846
queueWatcher @ vue.runtime.esm.js?2b0e:3064
update @ vue.runtime.esm.js?2b0e:3205
notify @ vue.runtime.esm.js?2b0e:693
reactiveSetter @ vue.runtime.esm.js?2b0e:1010
IS_COOKIE_AUTHENTICATED @ auth.js?c7d4:135
wrappedMutationHandler @ vuex.esm.js?2f62:697
commitIterator @ vuex.esm.js?2f62:389
(anonymous) @ vuex.esm.js?2f62:388
_withCommit @ vuex.esm.js?2f62:495
commit @ vuex.esm.js?2f62:387
boundCommit @ vuex.esm.js?2f62:335
local.commit @ vuex.esm.js?2f62:651
(anonymous) @ auth.js?c7d4:25
Promise.then (async)
isCookieAuthenticated @ auth.js?c7d4:22
wrappedActionHandler @ vuex.esm.js?2f62:704
dispatch @ vuex.esm.js?2f62:426
boundDispatch @ vuex.esm.js?2f62:332
local.dispatch @ vuex.esm.js?2f62:634
mappedAction @ vuex.esm.js?2f62:880
created @ main.js?56d7:146
callHook @ vue.runtime.esm.js?2b0e:2917
Vue._init @ vue.runtime.esm.js?2b0e:4626
Vue @ vue.runtime.esm.js?2b0e:4725
(anonymous) @ main.js?56d7:126
./src/main.js @ app.js:10600
__webpack_require__ @ app.js:768
fn @ app.js:131
0 @ app.js:10745
__webpack_require__ @ app.js:768
(anonymous) @ app.js:904
(anonymous) @ app.js:907
vue.runtime.esm.js?2b0e:1737 TypeError: Cannot read property 'indexOf' of undefined
at Object.addClass (kendo-core.js?8a22:193)
at init._setElementClass (kendo-chart.js?9bc2:12567)
at init._initElement (kendo-chart.js?9bc2:12558)
at new init (kendo-chart.js?9bc2:12537)
at init._createChart (chart.js?4118:468)
at init._initChart (chart.js?4118:462)
at init._initDataSource (chart.js?4118:495)
at new init (chart.js?4118:188)
at Comment.eval (kendo.core.js?38f6:3249)
at Function.each (jquery.js?1157:354)
----------------------------------------------
I tried replacing my chart with code taken from:
https://www.telerik.com/kendo-vue-ui/components/charts/chart/data-binding/
And I am receiving the exact same errors. Vue version: "vue": "^2.5.17",
4 Answers, 1 is accepted
The Kendo UI for Vue components require the usage of the full Vue build that features both the runtime and the compiler. Additional information regarding this is available in the following resources:
To resolve the issue, just reference the full Vue.js build - vue.esm.js instead of vue.runtime.esm.js. Depending on the project setup, you could do this from:
- with WebPack config file by adding an alias to the full build.
- with vue-cli by creating a vue-config.js file in the project's root and setting the runtimeCompiler option to true.
We have logged an enhancement item in the official Kendo UI GitHub repository regarding adding support for the runtime only build of Vue.js. I would encourage you to give your feedback by commenting below the issue.
Regards,
Dimitar
Progress Telerik
Rank 1
Hi Dimitar, thanks for the info packed response. I am using Vue-Cli on this particular project and was able to update to the full build which resolved the issue.
I didn't realize that kendo vue now support vue templates. that's great!
So is there a dependency on jquery for kendo ui for Vue? Is jquery included in a kendo ui npm package?
Rank 1
have to repost this as there was an error on post. Thanks for the info packed response. I am using vue-cli and was able to update the config to use full build which resolved the issue. I didn't realize we can now use vue templates as opposed to kendo templates. That's great.
So is there a dependency on jquery for kendo vue components? Is it packaged inside the kendo ui vue npm packages?
Yes, jQuery is a dependency of the Kendo UI package that is added with:
npm install --save @progress/kendo-uiRegards,
Dimitar
Progress Telerik