scrollTo does not seem to work properly in versions after 1.1.9

[stefanobartoletti]

I had a setup including Lenis in a Nuxt project, where I had configured something similar to this:

<template>
  <button @click="goToSection()">Go to start</button>
</template>

<script setup>
// I stored Lenis instance on a Pinia store to make it available anywhere in my app
const mainStore = useMainStore()

const goToSection = () => {
  console.log('goToSection start', mainStore.lenisInstance)
  const el = document.querySelector(`[work-section="start"]`)
  mainStore.lenisInstance.scrollTo(el, {
    lerp: 0.05,
  })
  console.log('goToSection end')
}
</script>

When using Lenis 1.1.9 or older, scrollTo works as expected and nothing is logged

If I update Lenis to 1.1.10 or newer versions, scrollTo is no longer working (so clicking on the button does not bring me to the desired element on the page) and some error is logged;

I tried even some different setup, like this:

// directly use selector
mainStore.lenisInstance.scrollTo(`[work-section="start"]`, {
  lerp: 0.05,
})

// or give a numeric value
mainStore.lenisInstance.scrollTo(200, {
  lerp: 0.05,
})

But the problem persists.

Apparently, something was changed between versions 1.1.9 and 1.1.10, but I cannot find anything in the docs (and in the semver version too), that suggests that the API received some breaking changes.

Am I doing something wrong or I stumbled into a bug?

[feledori]

going to take a look now

[stefanobartoletti]

Thanks, let me know If you need some more info.

[feledori]

can't reproduce internally. from 1.1.9 to 1.1.10 there where internal changes but no changes to the external api. some private properties moved to the # private js class property declaration and it looks like some proxy is trying to access this here. cant reproduce in the repo. could you please provide a stackblitz link with your nuxt, pinia setup?

[stefanobartoletti]

Yes, I will try to put something together ASAP

[feledori]

was able to reproduce just now. looks like pinia creates proxies around its content. this will break private property access. while digging into this issue I found this discussion: tc39/proposal-class-fields#106. look like vues reactivity setup through proxies will have problems with private properties. we will discuss this internally, but will probably revert.

[feledori]

just pushed the changes. will publish soon, after that all should be good on the vue side again. keeping this here as a reference vuejs/core#8149 (comment).

[stefanobartoletti]

Thank you, I can confirm that now with version 1.1.13 everything is working again ✌️

[feledori]

perfect