vueuse
useScroll is broken in version 1.6.0
Describe the bug
In version 1.6.0 useScroll is not working.
index.mjs:3859 Uncaught (in promise) TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at setArrivedState (index.mjs:3859:40)
This is what was working in version 1.5.0:
const { arrivedState } = useScroll(scrollBox)
const { bottom, top } = toRefs(arrivedState)
Looks like this MR broke the functionality: https://github.com/vueuse/vueuse/pull/3384
In my reproduction the error is another (maybe because it's not nuxt) but it also does not work
Reproduction
https://codesandbox.io/p/devbox/wild-smoke-qvhhq2?file=%2Fpages%2Findex.vue%3A3%2C9&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clpa4yb7h00064e6j4kztga01%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clpa4yb7h00034e6jtv0mmnoz%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clpa4yb7h00044e6jqqynzs4w%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpa4yb7h00054e6jpvtxv7nk%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B53.13247702202947%252C46.86752297797053%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clpa4yb7h00034e6jtv0mmnoz%2522%253A%257B%2522id%2522%253A%2522clpa4yb7h00034e6jtv0mmnoz%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpa5i4v600034e6j2bl0orry%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A3%252C%2522startColumn%2522%253A9%252C%2522endLineNumber%2522%253A3%252C%2522endColumn%2522%253A9%257D%255D%252C%2522filepath%2522%253A%2522%252Fpages%252Findex.vue%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clpa5i4v600034e6j2bl0orry%2522%257D%252C%2522clpa4yb7h00054e6jpvtxv7nk%2522%253A%257B%2522id%2522%253A%2522clpa4yb7h00054e6jpvtxv7nk%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clpa5f8rc00f34e6j13jfona1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clpa5f8rc00f34e6j13jfona1%2522%257D%252C%2522clpa4yb7h00044e6jqqynzs4w%2522%253A%257B%2522id%2522%253A%2522clpa4yb7h00044e6jqqynzs4w%2522%252C%2522activeTabId%2522%253A%2522clpa4zctl008e4e6jq0hlxn96%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpa4zctl008e4e6jq0hlxn96%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clpa4zcwb000wefbchkxmhpv5%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
System Info
System:
OS: macOS 13.6.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 49.66 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.8.1 - ~/.nvm/versions/node/v20.8.1/bin/node
npm: 10.1.0 - ~/.nvm/versions/node/v20.8.1/bin/npm
pnpm: 8.10.5 - ~/Library/pnpm/pnpm
Browsers:
Chrome: 119.0.6045.159
Safari: 16.6
npmPackages:
@vueuse/nuxt: 10.6.1 => 10.6.1
Used Package Manager
pnpm
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- [X] The provided reproduction is a minimal reproducible example of the bug.
No. It’s still broken in the latest version. I mentioned the first appearance of the bug. The code is working with 1.5.0
BTW the same error is for useInfiniteScroll function. I've checked in 1.6.1. But useInfiniteScroll also does not work in 1.5.0.
It could be that I use ref on Vuetify component 🤷🏻:
<v-card ref="scrollbox">
I tried useInfiniteScroll in 1.0.0 and it worked. But it does not work even in 1.5.0 (same error)
Same problem here with v10.7.0 and boostrap-vue-3
<b-row ref="el"></b-row> This one breaks the page with the same error mentioned above
<div class="row" ref="el"></b-row> Like that it works but can't use the props
Other user still complain about the same error: https://github.com/vueuse/vueuse/issues/3136#issuecomment-1911730848