Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

See original GitHub issue

Recently got two error messages on sentry. Both are from an Android 4.4.4 device on a Chrome browser (Chrome 73.0.3683)

Not sure if I can help in any way or if they are related (let me know if it’s better to create a separate issue for the second one). 1)

TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
  at call(./node_modules/vue-lazy-hydration/dist/LazyHydrate.esm.js:364:1)
  at invokeWithErrorHandling(./node_modules/vue/dist/vue.runtime.esm.js:1854:1)
  at callHook(./node_modules/vue/dist/vue.runtime.esm.js:4213:1)
  at insert(./node_modules/vue/dist/vue.runtime.esm.js:3139:1)
  at invokeInsertHook(./node_modules/vue/dist/vue.runtime.esm.js:6340:1)
  at __patch__(./node_modules/vue/dist/vue.runtime.esm.js:6559:1)
  at _update(./node_modules/vue/dist/vue.runtime.esm.js:3939:1)
  at call(./node_modules/vue/dist/vue.runtime.esm.js:4060:1)
  at get(./node_modules/vue/dist/vue.runtime.esm.js:4473:1)
  at new xn(./node_modules/vue/dist/vue.runtime.esm.js:4462:1)
  at vm(./node_modules/vue/dist/vue.runtime.esm.js:4067:1)
  at $mount(./node_modules/vue/dist/vue.runtime.esm.js:8409:1)
  at i(./node_modules/vue/dist/vue.runtime.esm.js:3118:1)
  at hydrate(./node_modules/vue/dist/vue.runtime.esm.js:6372:55)
  at hydrate(./node_modules/vue/dist/vue.runtime.esm.js:6405:1)
  at __patch__(./node_modules/vue/dist/vue.runtime.esm.js:6487:1)
  at _update(./node_modules/vue/dist/vue.runtime.esm.js:3939:1)
  at call(./node_modules/vue/dist/vue.runtime.esm.js:4060:1)
  at get(./node_modules/vue/dist/vue.runtime.esm.js:4473:1)
  at new xn(./node_modules/vue/dist/vue.runtime.esm.js:4462:1)
  at vm(./node_modules/vue/dist/vue.runtime.esm.js:4067:1)
  at $mount(./node_modules/vue/dist/vue.runtime.esm.js:8409:1)
  at i(./node_modules/vue/dist/vue.runtime.esm.js:3118:1)
  at hydrate(./node_modules/vue/dist/vue.runtime.esm.js:6372:55)
  at hydrate(./node_modules/vue/dist/vue.runtime.esm.js:6405:1)
  at __patch__(./node_modules/vue/dist/vue.runtime.esm.js:6487:1)
  at _update(./node_modules/vue/dist/vue.runtime.esm.js:3939:1)
  at call(./node_modules/vue/dist/vue.runtime.esm.js:4060:1)
  at get(./node_modules/vue/dist/vue.runtime.esm.js:4473:1)
  at new xn(./node_modules/vue/dist/vue.runtime.esm.js:4462:1)
  at vm(./node_modules/vue/dist/vue.runtime.esm.js:4067:1)
  at $mount(./node_modules/vue/dist/vue.runtime.esm.js:8409:1)
  at mount(./.nuxt/client.js:495:10)
  at call(./.nuxt/client.js:525:5)
  at tryCatch(./node_modules/regenerator-runtime/runtime.js:45:15)
  at _invoke(./node_modules/regenerator-runtime/runtime.js:271:1)
  at key(./node_modules/regenerator-runtime/runtime.js:97:1)
  at asyncGeneratorStep(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1)
  at _next(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:25:1)

TypeError: Cannot read property '0' of undefined
  at call(./node_modules/vue-lazy-hydration/dist/LazyHydrate.esm.js:397:6)
  at _render(./node_modules/vue/dist/vue.runtime.esm.js:3542:1)
  at call(./node_modules/vue/dist/vue.runtime.esm.js:4060:1)
  at get(./node_modules/vue/dist/vue.runtime.esm.js:4473:1)
  at run(./node_modules/vue/dist/vue.runtime.esm.js:4548:1)
  at flushSchedulerQueue(./node_modules/vue/dist/vue.runtime.esm.js:4304:1)
  at i(./node_modules/vue/dist/vue.runtime.esm.js:1980:1)
  at flushCallbacks(./node_modules/vue/dist/vue.runtime.esm.js:1906:1)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
mfrascaticommented, Feb 17, 2020

I had the same issue, but the issue happened lazy loading a component having a v-if.

In my case I had the error on route leave, because in the beforeRouteLeave I was cleaning the object, making the v-if false, so on LazyHydrate self cleaning the object was not present. Easily fixed by wrapping my component in a div.

Maybe this solution can be helpful for somebody else!

0reactions
maxxcscommented, Oct 10, 2019

I had the same issue when I used with <component :is="someComponent" />

Example:

<LazyHydrate v-slot="{ hydrated }" on-interaction>
  <component :is="someComponent" v-if="hydrated" />
</LazyHydrate>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Failed to execute 'observe' on 'IntersectionObserver ...
Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element' · querySelector returns Element | ...
Read more >
Failed to execute 'observe' on 'IntersectionObserver ... - GitHub
Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element' #15. Closed. udisun opened this issue on Jan 2, ...
Read more >
[Typescript and React] Please help me with this Error ... - Reddit
... but I get an Error 'Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
Read more >
IntersectionObserver.observe() - Web APIs - MDN Web Docs
The IntersectionObserver method observe() adds an element to the set of target elements being watched by the IntersectionObserver .
Read more >
RC1 breaks Cypress Tests [#3324320] | Drupal.org
... with an exception I had never seen before: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found