Cannot read properties of undefined (reading '$root')

[NoHara42]

Hi,

Relatively new to Alpinejs, but getting the grips and beginning to fall in love.

Within this context:

    Alpine.data('slider', () => ({
    prevArrow: this.$root.getElementById('prev')
});

This is occuring:
module.esm.js:1703 Uncaught TypeError: Cannot read properties of undefined (reading '$root')

I am on version 3.4.2. (Latest)

This is what my yarn.lock looks like:

alpinejs@^3.3.5:
  version "3.4.2"
  resolved "https://registry.yarnpkg.com/alpinejs/-/alpinejs-3.4.2.tgz#e570b7439a32cb07a1b5f1a47d2966388469111d"
  integrity sha512-PCTLdySJG5ercbN/g4sO+Nyo0TjzV3IP5W9L3UiSj3756VZPUctNiikLAoKX5al2NlLE2O7jPpgtakuRpLLeIQ==
  dependencies:
    "@vue/reactivity" "~3.1.1"

Unsure what could be the cause of this.
Other magics seem to be working.
Pointers very welcome! I assume this isn't a bug.

Cheers.

[danddanddand]

It should be accessible, see example https://codepen.io/danddanddand/pen/WNEOWaz

I'd have to see more to be able to debug but if you are actually trying to lookup something by id, it should be unique to the DOM and not use $this.root.getElementById but just document.getElementById. Usually with Alpine you'll use x-ref instead.

[SimoTod]

I don't think you can use $root inside x-data. '$root' navigates the dom upwards to find the closest ancestor with a valid alpine data scope. While it evaluates x-data the component hasn't been started yet so root will try to move up the dom.
You got several options here:

• start the property as '' and set it to the right value using init
• use a getter (in this way the helper is only evaluated when a later directive uses it)
• do not use the helper in x-data but directly in the relevant directive.
• Use something different like Document.getElementById

[NoHara42]

But if you had multiple instances of the alpinejs class on a single page, (assuming you might use the document.getElementById... method) wouldn't they all refer to the same element and cross reference eachother mistakenly? Or does alpinejs already handle limiting the DOM to the scope of the element in which x-data has been wrapped around? I'm trying to refer to the template of elements with each instance of an alpinejs class on a one-to-one basis. Thanks for all your suggestions. :)

…

On Thu, 28 Oct 2021, 22:22 Simone Todaro, ***@***.***> wrote: I don't think you can use $root inside x-data. '$root' navigate the dom up to find the closest ancestor with a valid alpine data scope. While it evaluates x-data the component hasn't been started yet so root will try to move up the dom. You got several options here: - start the property as '' and set it to the right value using init - use a getter (in this way the helper is only evaluated when a later directive uses it) - do not use the helper in x-data but directly in the relevant directive. - Use something different like Document.getElementById — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2279 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKL3KSSVPVH74IIA7C62MMTUJG5I7ANCNFSM5G5KU2CA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[danddanddand]

Your code snippet is a little confusing because of using the magic outside is a function where Alpine doesn't have opportunity to inject context and the use of getElementById. If the element you're trying to reference is in the same component (same x-data scope), using x-ref / $refs in a function on component probably what you want. You could set it in x-init however. Lots of ways to do it just hard to understand from small code sample that doesn't make sense exactly what you're trying to do.

[SimoTod]

btw, you shouldn't have multiple elements on the same page sharing the same ID: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

[NoHara42]

I ended up just using $refs on the node where x-data was set, thanks for the input!

…

On Fri, 29 Oct 2021, 16:31 Simone Todaro, ***@***.***> wrote: btw, you shouldn't have multiple elements on the same page sharing the same ID: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2279 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKL3KSVHF4BRTZDNDZPPN3TUJK45LANCNFSM5G5KU2CA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.