Cannot read property 'tagName' of null

janceChun commented 4 years ago

Version

2.4.5

Vue.js version

2.5.3

What is actually happening?

Cannot read property 'tagName' of null

Chrome Mobile 80.0.3987 browser.name. Chrome Mobile device SM-G9500 device.family Samsung SM-G9500

ivelin commented 4 years ago

We are seeing the same error. Not clear what the root cause is.

[Vue warn]: Error in callback for immediate watcher "forceUseInfiniteWrapper": "TypeError: Cannot read property 'tagName' of null"

found in

---> <InfiniteLoading>
       <VList>
         <Timeline> at src/views/Timeline.vue
           <VContent>
             <VApp>
               <AppFrame> at src/components/AppFrame.vue
                 <VLazy>
                   <App> at src/App.vue
                     <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue.$watch @ vue.runtime.esm.js?2b0e:4951
mounted @ vue-infinite-loading.js?e166:6
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:4066
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 @ pnp.js?d013:102
wrappedMutationHandler @ vuex.esm.js?2f62:785
commitIterator @ vuex.esm.js?2f62:407
eval @ vuex.esm.js?2f62:406
_withCommit @ vuex.esm.js?2f62:565
commit @ vuex.esm.js?2f62:405
boundCommit @ vuex.esm.js?2f62:350
_callee7$ @ pnp.js?d013:464
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:274
prototype.<computed> @ runtime.js?96cf:97
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
eval @ pnp.js?d013:444
wrappedActionHandler @ vuex.esm.js?2f62:792
dispatch @ vuex.esm.js?2f62:457
boundDispatch @ vuex.esm.js?2f62:347
eval @ pnp.js?d013:250
setTimeout (async)
eval @ pnp.js?d013:250
i.emit @ peerjs.min.js?a0bc:46
dataChannel.onopen @ peerjs.min.js?a0bc:62
14:28:37.563 vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'tagName' of null
    at VueComponent.getScrollParent (vue-infinite-loading.js?e166:6)
    at VueComponent.getScrollParent (vue-infinite-loading.js?e166:6)
    at VueComponent.getScrollParent (vue-infinite-loading.js?e166:6)
    at VueComponent.getScrollParent (vue-infinite-loading.js?e166:6)
    at VueComponent.getScrollParent (vue-infinite-loading.js?e166:6)
    at VueComponent.eval (vue-infinite-loading.js?e166:6)
    at VueComponent.Vue.$watch (vue.runtime.esm.js?2b0e:4949)
    at VueComponent.mounted (vue-infinite-loading.js?e166:6)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue.$watch @ vue.runtime.esm.js?2b0e:4951
mounted @ vue-infinite-loading.js?e166:6
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:4066
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 @ pnp.js?d013:102
wrappedMutationHandler @ vuex.esm.js?2f62:785
commitIterator @ vuex.esm.js?2f62:407
eval @ vuex.esm.js?2f62:406
_withCommit @ vuex.esm.js?2f62:565
commit @ vuex.esm.js?2f62:405
boundCommit @ vuex.esm.js?2f62:350
_callee7$ @ pnp.js?d013:464
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:274
prototype.<computed> @ runtime.js?96cf:97
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
eval @ pnp.js?d013:444
wrappedActionHandler @ vuex.esm.js?2f62:792
dispatch @ vuex.esm.js?2f62:457
boundDispatch @ vuex.esm.js?2f62:347
eval @ pnp.js?d013:250
setTimeout (async)
eval @ pnp.js?d013:250
i.emit @ peerjs.min.js?a0bc:46
dataChannel.onopen @ peerjs.min.js?a0bc:62
14:28:37.576 vue-infinite-loading.js?e166:6 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at eval (vue-infinite-loading.js?e166:6)

ivelin commented 4 years ago

We experienced the same issue. It appears that InfiniteLoader does not play nice with Vue keep-alive wrapped around the component.

We noticed that Vue calls back InfiniteLoader when state changes occur on pages where InifiniteLoader is not currently rendered, which causes it to error because it thinks it can access its DOM parent, but there aren't any DOM parents when the component is not currently rendered. Here is the related issue in our project ambianic/ambianic-ui/issues/394

serialine commented 3 years ago

MathanKA commented 3 years ago

anyone knows the solution?

I still face the same issue with nuxt: 2.15.7

When I use keep-alive, it is breaking..

kyrylo93 commented 3 years ago

have same issue

yahao87 commented 3 years ago

have same issue.

kensei18 commented 2 years ago

I had the same problem, but already resolved :)

The cause was that the component using infinite-loading inside was loaded too early. Try lazy loading like:

<template>
  <div>
    <h1>This is Parent</h1>
    <Child />
  </div>
</template>

<script>
// DO NOT import HERE!

export default {
  name: "Parent",

  components: {
    // lazy loading
    Child: () => import('path/to/child.vue');
  }
}
</script>

<template>
  <div>
    <div v-for="item in items">
      ...
    </div>
    <infinite-loading @infinite="infiniteHandler"></infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from "vue-infinite-loading";

export default {
  name: "Child",

  components: {
    InfiniteLoading
  },

  methods: {
    infiniteHandler() {...}
  }
}

toniengelhardt commented 2 years ago

Same issue with Nuxt 3

PeachScript / vue-infinite-loading