TypeError: Cannot read property 'forEach' of undefined

Question

TypeError: Cannot read property 'forEach' of undefined

ab2d3e8 opened this issue 4 years ago · comments

RangeError: Invalid array length
at Proxy.renderList (vue.runtime.esm.js?2b0e:2633)
at Proxy.dt (vue-flux.umd.min.js?fcb2:1)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4055)
at Watcher.get (vue.runtime.esm.js?2b0e:4479)
at Watcher.run (vue.runtime.esm.js?2b0e:4554)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
at Array.eval (vue.runtime.esm.js?2b0e:1980)
at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

TypeError: Cannot read property 'forEach' of undefined
at VueComponent.eval (vue-flux.umd.min.js?fcb2:1)
at Array.eval (vue.runtime.esm.js?2b0e:1980)
at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

ragnarlotus · Answer 1 · Fri Feb 21 2020 23:57:47 GMT+0800 (China Standard Time)

Sorry but without further info I can not find the bug.

Do you have any repo or conditions that give me a tip to test it?

ab2d3e8 · Answer 2 · Mon Feb 24 2020 17:48:22 GMT+0800 (China Standard Time)

Also,I can not find the bug
But
When adding the next line

<keep-alive>
    <router-view />
</keep-alive>

And previously it was
<router-view />

This problem appears. After viewing the next in the slide

I think this problem can be solved in the word variables. Sure, the variable is not null.
Example

var array = null;
array && array.forEach (element => {
      console.log (element);
});

analytics_debug.js:25 Executing Google Analytics commands.
analytics_debug.js:25 Running command: ga("send", "exception", {exDescription: "Cannot read property 'forEach' of undefined", exFatal: false})
analytics_debug.js:25 Send start: NaN
analytics_debug.js:25 exDescription="Cannot read property 'forEach' of undefined" (temp)
analytics_debug.js:25 exFatal=false (temp)
analytics_debug.js:25 hitType="exception" (temp)
analytics_debug.js:25
Executing 16 filters:
analytics_debug.js:25 filter[0]: _oot
analytics_debug.js:25 filter[1]: customTask
analytics_debug.js:25 filter[2]: previewTask
analytics_debug.js:25 filter[3]: checkProtocolTask
analytics_debug.js:25 filter[4]: validationTask
analytics_debug.js:25 filter[5]: checkStorageTask
analytics_debug.js:25 filter[6]: historyImportTask
analytics_debug.js:25 filter[7]: samplerTask
analytics_debug.js:25 filter[8]: _rlt
analytics_debug.js:25 _to=18
analytics_debug.js:25 _hc=2
analytics_debug.js:25 filter[9]: ceTask
analytics_debug.js:25 filter[10]: devIdTask
analytics_debug.js:25 filter[11]: displayFeaturesTask
analytics_debug.js:25 _j1="" (temp)
analytics_debug.js:25 _j2="" (temp)
analytics_debug.js:25 filter[12]: buildHitTask
analytics_debug.js:25 usage="SACAAEABE~" (temp)
analytics_debug.js:25 _s=2
analytics_debug.js:25 hitPayload="v=1&_v=j81d&a=1834372838&t=exception&_s=2&dl=http%3A%2F%2Flocalhost%2F&ul=ar&de=UTF-8&dt=%D8%A7%D9%84%D8%B1%D8%A6%D9%8A%D8%B3%D9%8A%D8%A9&sd=24-bit&sr=2560x1440&vp=1353x854&je=0&exd=Cannot%20read%20property%20'forEach'%20of%20undefined&exf=0&_u=SACAAEABE~&jid=&gjid=&cid=533191594.1580021627&tid=UA-135919525-1&_gid=1313924564.1582431007&z=919870989" (temp)
analytics_debug.js:25 filter[13]: _dt
analytics_debug.js:25 filter[14]: sendHitTask
analytics_debug.js:25
Sent beacon:
v=1&_v=j81d&a=1834372838&t=exception&_s=2&dl=http%3A%2F%2Flocalhost%2F&ul=ar&de=UTF-8&dt=%D8%A7%D9%84%D8%B1%D8%A6%D9%8A%D8%B3%D9%8A%D8%A9&sd=24-bit&sr=2560x1440&vp=1353x854&je=0&exd=Cannot%20read%20property%20'forEach'%20of%20undefined&exf=0&_u=SACAAEABE~&jid=&gjid=&cid=533191594.1580021627&tid=UA-135919525-1&_gid=1313924564.1582431007&z=919870989

analytics_debug.js:25 _j1 (&jid)
analytics_debug.js:25 _j2 (&gjid)
analytics_debug.js:25 adSenseId (&a) 1834372838
analytics_debug.js:25 apiVersion (&v) 1
analytics_debug.js:25 clientId (&cid) 533191594.1580021627
analytics_debug.js:25 encoding (&de) UTF-8
analytics_debug.js:25 exDescription (&exd) Cannot read property 'forEach' of undefined
analytics_debug.js:25 exFatal (&exf) 0
analytics_debug.js:25 hitType (&t) exception
analytics_debug.js:25 javaEnabled (&je) 0
analytics_debug.js:25 language (&ul) ar
analytics_debug.js:25 location (&dl) http://localhost/
analytics_debug.js:25 screenColors (&sd) 24-bit
analytics_debug.js:25 screenResolution (&sr) 2560x1440
analytics_debug.js:25 title (&dt) الرئيسية
analytics_debug.js:25 trackingId (&tid) UA-135919525-1
analytics_debug.js:25 viewportSize (&vp) 1353x854
analytics_debug.js:25 hitCallback=[function] (temp)
analytics_debug.js:25 filter[15]: timingTask
analytics_debug.js:25 Send finished: NaN
vue-analytics.js?0284:1 TypeError: Cannot read property 'forEach' of undefined
at VueComponent.eval (vue-flux.umd.min.js?fcb2:1)
at Array.eval (vue.runtime.esm.js?2b0e:1980)
at flushCallbacks (vue.runtime.esm.js?2b0e:1906)
H.e.config.errorHandler @ vue-analytics.js?0284:1
globalHandleError @ vue.runtime.esm.js?2b0e:1870
handleError @ vue.runtime.esm.js?2b0e:1839
eval @ vue.runtime.esm.js?2b0e:1982
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
Vue.$nextTick @ vue.runtime.esm.js?2b0e:3521
transform @ vue-flux.umd.min.js?fcb2:1
mounted @ vue-flux.umd.min.js?fcb2:1
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
callHook @ vue.runtime.esm.js?2b0e:4219
insert @ vue.runtime.esm.js?2b0e:3139
invokeInsertHook @ vue.runtime.esm.js?2b0e:6346
patch @ vue.runtime.esm.js?2b0e:6565
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
Vue.$nextTick @ vue.runtime.esm.js?2b0e:3521
componentUpdated @ tooltip.js?2616:258
callHook$1 @ vue.runtime.esm.js?2b0e:6680
eval @ vue.runtime.esm.js?2b0e:6632
wrappedHook @ vue.runtime.esm.js?2b0e:2235
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2175
patchVnode @ vue.runtime.esm.js?2b0e:6335
updateChildren @ vue.runtime.esm.js?2b0e:6193
patchVnode @ vue.runtime.esm.js?2b0e:6319
updateChildren @ vue.runtime.esm.js?2b0e:6193
patchVnode @ vue.runtime.esm.js?2b0e:6319
patch @ vue.runtime.esm.js?2b0e:6482
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
setCss @ vue-flux.umd.min.js?fcb2:1
show @ vue-flux.umd.min.js?fcb2:1
showImage @ vue-flux.umd.min.js?fcb2:1
eval @ vue-flux.umd.min.js?fcb2:1
setTimeout (async)
play @ vue-flux.umd.min.js?fcb2:1
eval @ vue-flux.umd.min.js?fcb2:1
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
addImage @ vue-flux.umd.min.js?fcb2:1
load @ vue-flux.umd.min.js?fcb2:1
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
load (async)
add$1 @ vue.runtime.esm.js?2b0e:6921
updateListeners @ vue.runtime.esm.js?2b0e:2211
updateDOMListeners @ vue.runtime.esm.js?2b0e:6951
invokeCreateHooks @ vue.runtime.esm.js?2b0e:6069
createElm @ vue.runtime.esm.js?2b0e:5956
addVnodes @ vue.runtime.esm.js?2b0e:6106
updateChildren @ vue.runtime.esm.js?2b0e:6233
patchVnode @ vue.runtime.esm.js?2b0e:6319
patch @ vue.runtime.esm.js?2b0e:6482
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
Vue.$nextTick @ vue.runtime.esm.js?2b0e:3521
preloadImages @ vue-flux.umd.min.js?fcb2:1
eval @ vue-flux.umd.min.js?fcb2:1
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
Vue.$nextTick @ vue.runtime.esm.js?2b0e:3521
componentUpdated @ tooltip.js?2616:258
callHook$1 @ vue.runtime.esm.js?2b0e:6680
eval @ vue.runtime.esm.js?2b0e:6632
wrappedHook @ vue.runtime.esm.js?2b0e:2235
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2175
patchVnode @ vue.runtime.esm.js?2b0e:6335
updateChildren @ vue.runtime.esm.js?2b0e:6193
patchVnode @ vue.runtime.esm.js?2b0e:6319
updateChildren @ vue.runtime.esm.js?2b0e:6193
patchVnode @ vue.runtime.esm.js?2b0e:6319
patch @ vue.runtime.esm.js?2b0e:6482
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
mutator @ vue.runtime.esm.js?2b0e:882
eval @ Home.vue?76f2:790
eval @ index.cjs.js?e89a:22762
eval @ index.cjs.js?e89a:13929
LLRBNode.inorderTraversal @ index.cjs.js?e89a:2428
LLRBNode.inorderTraversal @ index.cjs.js?e89a:2427
SortedMap.inorderTraversal @ index.cjs.js?e89a:2294
DocumentSet.forEach @ index.cjs.js?e89a:13928
QuerySnapshot.forEach @ index.cjs.js?e89a:22761
eval @ Home.vue?76f2:788
Promise.then (async)
mounted @ Home.vue?76f2:777
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
callHook @ vue.runtime.esm.js?2b0e:4219
insert @ vue.runtime.esm.js?2b0e:3139
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2175
invokeInsertHook @ vue.runtime.esm.js?2b0e:6346
patch @ vue.runtime.esm.js?2b0e:6565
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:2780
eval @ vue-router.esm.js?8c4f:2779
updateRoute @ vue-router.esm.js?8c4f:2208
eval @ vue-router.esm.js?8c4f:2071
eval @ vue-router.esm.js?8c4f:2193
step @ vue-router.esm.js?8c4f:1877
step @ vue-router.esm.js?8c4f:1884
runQueue @ vue-router.esm.js?8c4f:1888
eval @ vue-router.esm.js?8c4f:2188
step @ vue-router.esm.js?8c4f:1877
eval @ vue-router.esm.js?8c4f:1881
eval @ vue-router.esm.js?8c4f:2173
eval @ vue-router.esm.js?8c4f:1920
eval @ vue-router.esm.js?8c4f:1996
Promise.then (async)
eval @ vue-router.esm.js?8c4f:1943
eval @ vue-router.esm.js?8c4f:1964
eval @ vue-router.esm.js?8c4f:1964
flatMapComponents @ vue-router.esm.js?8c4f:1963
eval @ vue-router.esm.js?8c4f:1899
iterator @ vue-router.esm.js?8c4f:2154
step @ vue-router.esm.js?8c4f:1880
step @ vue-router.esm.js?8c4f:1884
eval @ vue-router.esm.js?8c4f:1881
eval @ vue-router.esm.js?8c4f:2173
eval @ main.js?56d7:182
iterator @ vue-router.esm.js?8c4f:2154
step @ vue-router.esm.js?8c4f:1880
runQueue @ vue-router.esm.js?8c4f:1888
confirmTransition @ vue-router.esm.js?8c4f:2181
transitionTo @ vue-router.esm.js?8c4f:2068
init @ vue-router.esm.js?8c4f:2766
beforeCreate @ vue-router.esm.js?8c4f:1234
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
callHook @ vue.runtime.esm.js?2b0e:4219
Vue._init @ vue.runtime.esm.js?2b0e:5004
Vue @ vue.runtime.esm.js?2b0e:5085
init @ main.js?56d7:204
eval @ main.js?56d7:282
eval @ main.js?56d7:288
./src/main.js @ app.js:23817
webpack_require @ app.js:770
fn @ app.js:130
1 @ app.js:23927
webpack_require @ app.js:770
(anonymous) @ app.js:908
(anonymous) @ app.js:911

ab2d3e8 · Answer 3 · Tue Feb 25 2020 02:55:53 GMT+0800 (China Standard Time)

Yes, I find the bug, at now .
This code get bug .

<div
			v-show="fluxs && fluxs.length > 0"
			class="mt-1" 
			style="border: 1px dotted black;"
		>
			<vue-flux 
				ref="flux1"
				v-b-tooltip.hover
				class="m-1"
				:title="fluxCaptions[fluxCaptions.current]"
				:options="fluxOptions"
				:images="fluxImages"
				:transitions="fluxTransitions"
				:captions="fluxCaptions"
			>
				<flux-index slot="index"></flux-index>
				<flux-controls slot="controls"></flux-controls>
				<flux-pagination slot="pagination"></flux-pagination>
				<flux-caption slot="caption" class="bg-secondary" style="opacity: .٦;text-shadow: 0 3px 3px #000;font-size: 1.2rem;"></flux-caption>
			</vue-flux>
</div>

when I remove the code:

v-show="fluxs && fluxs.length > 0"

there no bug

this code without bug

<div
			class="mt-1" 
			style="border: 1px dotted black;"
		>
			<vue-flux 
				ref="flux1"
				v-b-tooltip.hover
				class="m-1"
				:title="fluxCaptions[fluxCaptions.current]"
				:options="fluxOptions"
				:images="fluxImages"
				:transitions="fluxTransitions"
				:captions="fluxCaptions"
			>
				<flux-index slot="index"></flux-index>
				<flux-controls slot="controls"></flux-controls>
				<flux-pagination slot="pagination"></flux-pagination>
				<flux-caption slot="caption" class="bg-secondary" style="opacity: .٦;text-shadow: 0 3px 3px #000;font-size: 1.2rem;"></flux-caption>
			</vue-flux>
</div>

Thanks.

ragnarlotus · Answer 4 · Fri Feb 28 2020 20:28:57 GMT+0800 (China Standard Time)

Thanks, I will try to review it although can take me a while because I don't have much free time to spare.

I will let you know ASAP.

ragnarlotus · Answer 5 · Fri Feb 28 2020 20:42:53 GMT+0800 (China Standard Time)

Taking a quick look, seems that the error is originated in vue-analytics:

vue-analytics.js?0284:1 TypeError: Cannot read property 'forEach' of undefined

And the vars fluxs && fluxs.length have nothing to do with the slider, as you don't pass those vars to it.

Try to trigger the bug with the vue-analytics disabled.

ab2d3e8 · Answer 6 · Tue Mar 03 2020 04:36:02 GMT+0800 (China Standard Time)

when I remove the part of code:

v-b-tooltip.hover

there no bug

v-b-tooltip.hover it comes form bootstrap-vue.

ab2d3e8 · Answer 7 · Tue Mar 03 2020 12:39:28 GMT+0800 (China Standard Time)

Taking a quick look, seems that the error is originated in vue-analytics:
vue-analytics.js?0284:1 TypeError: Cannot read property 'forEach' of undefined
And the vars fluxs && fluxs.length have nothing to do with the slider, as you don't pass those vars to it.

Try to trigger the bug with the vue-analytics disabled.

Yes correct.

ragnarlotus · Answer 8 · Tue Mar 03 2020 18:35:34 GMT+0800 (China Standard Time)

Looks like there is an interference between you installed packages, and not slider real problem.

Try to disable them for those parts that cause the error.

Regards!