TypeError: Cannot read property 'forEach' of undefined

Question

TypeError: Cannot read property 'forEach' of undefined

ab2d3e8 opened this issue 5 years ago · 8 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)

Answer 1 · 2020-02-21T15:57:47.000Z

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?

Answer 2 · 2020-02-24T09:48:22.000Z

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

Answer 3 · 2020-02-24T18:55:53.000Z

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.

Answer 4 · 2020-02-28T12:28:57.000Z

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.

Answer 5 · 2020-02-28T12:42:53.000Z

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.

Answer 6 · 2020-03-02T20:36:02.000Z

when I remove the part of code:

v-b-tooltip.hover

there no bug

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

Answer 7 · 2020-03-03T04:39:28.000Z

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.

Answer 8 · 2020-03-03T10:35:34.000Z

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!