Question T13394
Visible to All Users

TypeError: Cannot read properties of undefined (reading 'render')

created 2 years ago (modified 2 years ago)

[Ticket cloned from T13358: [Vue error] $attrs is readonly / $listeners is readonly.]

There're also some errors when I click on results table (IE support) tab.

Clipboard-File-1.png

Call Stack
[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'render')" found in ---> <AnalyticsDatatables> at src/views/AnalyticsDatatables.vue <App> at src/App.vue <Root> warn$2 @ vue.js:5108 logError @ vue.js:3728 globalHandleError @ vue.js:3724 handleError @ vue.js:3691 invokeWithErrorHandling @ vue.js:3707 callHook$1 @ vue.js:3104 insert @ vue.js:4926 invokeInsertHook @ vue.js:6955 patch2 @ vue.js:7164 Vue2._update @ vue.js:2842 updateComponent @ vue.js:2948 Watcher2.get @ vue.js:4178 Watcher2.run @ vue.js:4254 flushSchedulerQueue @ vue.js:3194 (anonymous) @ vue.js:3826 flushCallbacks @ vue.js:3748 Promise.then (async) timerFunc @ vue.js:3773 nextTick @ vue.js:3838 queueWatcher @ vue.js:3280 Watcher2.update @ vue.js:4245 Dep2.notify @ vue.js:813 reactiveSetter @ vue.js:1041 (anonymous) @ vue-router.esm.js:3005 (anonymous) @ vue-router.esm.js:3004 updateRoute @ vue-router.esm.js:2414 (anonymous) @ vue-router.esm.js:2263 (anonymous) @ vue-router.esm.js:2402 step @ vue-router.esm.js:2084 step @ vue-router.esm.js:2091 runQueue @ vue-router.esm.js:2095 (anonymous) @ vue-router.esm.js:2397 step @ vue-router.esm.js:2084 (anonymous) @ vue-router.esm.js:2088 (anonymous) @ vue-router.esm.js:2384 (anonymous) @ vue-router.esm.js:2127 (anonymous) @ vue-router.esm.js:2203 Promise.then (async) (anonymous) @ vue-router.esm.js:2150 (anonymous) @ vue-router.esm.js:2171 (anonymous) @ vue-router.esm.js:2171 flatMapComponents @ vue-router.esm.js:2170 (anonymous) @ vue-router.esm.js:2106 iterator @ vue-router.esm.js:2362 step @ vue-router.esm.js:2087 step @ vue-router.esm.js:2091 runQueue @ vue-router.esm.js:2095 confirmTransition @ vue-router.esm.js:2392 transitionTo @ vue-router.esm.js:2260 init @ vue-router.esm.js:2996 beforeCreate @ vue-router.esm.js:1298 invokeWithErrorHandling @ vue.js:3700 callHook$1 @ vue.js:3104 Vue2._init @ vue.js:4712 VueComponent @ vue.js:5838 createComponentInstanceForVnode @ vue.js:5047 init @ vue.js:4909 createComponent2 @ vue.js:6580 createElm @ vue.js:6534 patch2 @ vue.js:7120 Vue2._update @ vue.js:2838 updateComponent @ vue.js:2948 Watcher2.get @ vue.js:4178 Watcher2 @ vue.js:4168 mountComponent @ vue.js:2965 Vue.$mount @ vue.js:9311 Vue.$mount @ vue.js:11870 Vue2._init @ vue.js:4724 Vue @ vue.js:5774 (anonymous) @ main.js:10 Show 67 more frames main.js:10 TypeError: Cannot read properties of undefined (reading 'render') at datatables.ts:269:38 at Array.map (<anonymous>) at ./src/tables/datatables.ts.DataTables2.getColumns (datatables.ts:263:39) at ./src/tables/datatables.ts.DataTables2.render (datatables.ts:134:24) at VueComponent.mounted (AnalyticsDatatables.vue:35:1) at invokeWithErrorHandling (vue.js:3700:63) at callHook$1 (vue.js:3104:15) at Object.insert (vue.js:4926:15) at invokeInsertHook (vue.js:6955:40) at VueComponent.patch2 [as __patch__] (vue.js:7164:11)

Answers approved by surveyjs Support

created 2 years ago (modified 2 years ago)

Hi,
To resolve the issue, it is necessary to update the order of script registration in the AnalyticsDatatables Vue component:

JavaScript
import $ from 'jquery' import "datatables.net"; import "datatables.net-dt"; import "datatables.net-buttons"; import "datatables.net-buttons"; import "datatables.net-buttons"; import "datatables.net-colreorder"; import "datatables.net-rowgroup"; import "survey-analytics/survey.analytics.datatables.min.css"; import "datatables.net-colreorder-dt/css/colReorder.dataTables.css"; import "datatables.net-responsive-dt/css/responsive.dataTables.css"; import "datatables.net-select-dt/css/select.dataTables.css"

Now, the SurveyJS Dashboard correctly displays a Tabulator view:
Clipboard-File-1.png

Please let me know if you have any questions or require further assistance.